var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('myDatepicker',['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.datepicker({
showOn:"both",
changeYear:true,
changeMonth:true,
dateFormat:'mm-dd-yy',
minDate: new Date(),
maxDate: new Date(2014,11,31),
onSelect:function (dateText, inst) {
ngModel.$setViewValue(dateText);
}
})
}
}
}]);
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Start <input type="text" ng-model="start" my-datepicker>
</body>
</html>
/* Put your css in here */
.some {
border: 1px solid #cacaca;
padding: 10px;
}