I finally was able to run datepicker directive in angular js , here are pointers
include following JS in order
- jquery.js
- jquery-ui.js
- angular-min.js
I added the following
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
in html code
<body ng-app="myApp" ng-controller="myController">
// some other html code
<input type="text" ng-model="date" mydatepicker />
<br/>
{{ date }}
//some other html code
</body>
in the js , make sure you code for the directive first and after that add the code for controller , else it will cause issues.
date picker directive :
var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
directive code referred from above answers.
After this directive , write the controller
app.controller('myController',function($scope){
//controller code
};
TRY THIS INSTEAD in angular js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
along with jquery.js and jquery-ui.js
we can implement angular js datepicker as
<input type="date" ng-model="date" name="DOB">
This gives the built in datepicker and date is set in ng-model and can be used for further processing and validation.
Found this after lot of successful headbanging with previous approach. :)
$(element).datepicker()elementmay be only a jQLite wrapper, not fully functional jQuery object.