AngularJS and jQueryUI DatePicker

posted in: Uncategorized | 0

This is part three of my look into AngularJS.

  1. AngularJS Intro and Setup
  2. AngularJS and Modernizr
  3. AngularJS and jQueryUI DatePicker
  4. AngularJS with TextArea and Scroll To
  5. AngularJS and Javascript Tips
  6. Coming soon…

Instead of using HTML5 date input type which is not supported by Internet Explorer and Firefox, I decided to use the AngularJS version of jQueryUI DatePicker called angular-ui-date.1, 2


Adding angular-ui-date

To begin, edit bower.json and add the following line:

Then run bower install to install angular-ui-date.

Next edit js/app.js to include the following before ngRoute:

In the index.html add the following inside the <head> section:

While still editing the index.html add the following to the script section: jQuery before angular.js. Otherwise, it would use a lite version of jQuery called jQLite.3


Using angular-ui-date

Inside the HTML template:

In the controller.js:

The options for angular-ui-date are the same as jQueryUI DatePicker. For further information see jQueryUI Datepicker for AngularJS.


<input>, Mozilla Developer Network
HTML5 Input Types,
3 “Does Angular use the jQuery library?”