Finally, I was able to run the datepicker directive in angular js, here are the pointers
include the 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 js, make sure you first code for the directive, and then add code for the controller, otherwise it will cause problems.
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(); } }); } }; });
directory code mentioned above.
After this directive write the controller
app.controller('myController',function($scope){
READ 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 a built-in datepicker, and the date is set in the ng model and can be used for further processing and verification.
I discovered this after a lot of successful struggle with the previous approach. :)