How to implement jQuery UI Datepicker Widget in your AngularJS Application

I have previously shared an article on my blog about jQuery UI Datepicker widget and explained various formats that you can apply based on your requirement. The jQuery Datepicker provides easy to use features and it’s still very popular among web developers. And, if you are an AngularJS developer, you can bind the jQuery Datepicker to a textbox element in your Angular application too. However, its usage is slightly different from the jQuery method.

Here is how you would have added the Datepicker using jQuery.

$(document).ready(function () {
    $('#tbDate').datepicker({});
});

In AngularJS, you will have to add the Datepicker in your AngularJS directive. Here’s a working example.

See this demo

The Markup

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <p>
            <input type="text" id="date"
                datepicker
                ng-model="datevalue" />
        </p>
        <p> Date: {{ datevalue }} </p>
    </div>
</body>

Please note that you have to include the jQuery CDN (which provides the Datepicker methods etc.) before the AngularJS CDN. Else, it might throw an error. (See the browser console for error, if any).

I have simply added an <input> element of type text in the view and applied an attribute named datepicker. This is my directive (see The Script below) that adds the Datepicker to the textbox. The ng-model directive will display the selected date (from the Datepicker) using the Expression {{ datevalue }}.

The Script for Creating the Directive

<script>
    var myApp = angular.module('myApp', []);

    myApp.directive("datepicker", function () {

        function link(scope, element, attrs, controller) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                onSelect: function (dt) {
                    scope.$apply(function () {
                        // UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
                        controller.$setViewValue(dt);   
                    });
                },
                dateFormat: "dd/mm/yy"      // SET THE FORMAT.
            });
        }

        return {
            require: 'ngModel',
            link: link
        };
    });
</script>
</html>

Try it

We need to create a directive that would allow us to manipulate the DOM. That means, when I select a date from the Datepicker, it should display it in my view. Therefore, I am using the link() function to bind the Datepicker.

Ref: Learn more about link() function

The important link() parameters in my example are the scope, element and controller.

We will first initialize the jQuery UI Datepicker by calling the datepicker() method using the element object.

Typically, you will initialize the datepicker() method in jQuery like this.

$('#date').datepicker({});

However, with the element object in Angular, it would look like this.

element.datepicker({
	… 
});

The procedure is quite similar and since the element object is a jqLite-wrapped (or jQuery) element, it is easy to initialize.

See this demo

👉 How to use a date filter in AngularJS and how to inject AngularJS date filter in the Controller

The onSelect function is executed when you select a date from the Datepicker. When called, it takes a parameter dt (the date value) and it passes to the view through the scope object.

You would need the scope object along with $apply() function, to detect any changes that occurs. The changes are selecting of a date.

scope.$apply(function () {
    …
});

Once Angular has detected the changes, it would update the view. To update the page with a value (its in dt), I am using the controller object with the $setViewValue() method.

controller.$setViewValue(dt);

The dateFormat attribute is standard. You can add other attributes too, if you want.

dateFormat: "dd/mm/yy",
changeYear:true,
changeMonth:true,
showOn:"both",
buttonText:"Select Date"

← PreviousNext →