jQuery UI Datepicker with AngularJS

JQuery UI Datepicker with AngularJS

How to use jquery ui calendar with angular js?
Recently I found out it is not straight forward to use jQuery UI together with Angular.js. Reason: if you are using the usual initialization like

$('.datepicker').datepicker();

In our factory function we get three parameters. Important are the scope, which is the current scope of the enclosing controller, and the element, which is the annotated HTML element. As “element” is a jQuery object, we can easily call the datepicker method which initializes the jQuery UI datepicker.

The interesting part happens in the onSelect method. It is a datepicker callback which is executed when the user selects a date. The argument is entering the method as text. Our goal is to apply the changed value to the controller scope.

 HTML

<div id="wrapper" ng-app="myApp">

<p>{{model.StartDate || "00/00/0000"}}</p>
<p>
  <input type="text" name="Startdate" calendar ng-model="model.StartDate" class="form-control" />
</div>
<p>

Modal.js

This is the directive which wraps the datepicker.

var myapp = angular.module('myapp');
myapp.directive('calendar', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

Scripts 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>