This is part three of my look into AngularJS.
- AngularJS Intro and Setup
- AngularJS and Modernizr
- AngularJS and jQueryUI DatePicker
- AngularJS with TextArea and Scroll To
- AngularJS and Javascript Tips
- 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:
1
2
|
...
"angular-ui-date": "latest"
|
Then run bower install to install angular-ui-date.
Next edit js/app.js to include the following before ngRoute:
1
2
3
4
|
...
'ui.date',
'ngRoute',
...
|
In the index.html add the following inside the <head> section:
1
2
3
4
5
|
<head>
...
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>
...
</head>
|
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
1
2
3
4
5
|
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
...
|
Using angular-ui-date
Inside the HTML template:
1 |
<input ui-date="dateOptions" ui-date-format="yy-mm-dd" ng-model="date" ng-change="changeDate()"/>
|
In the controller.js:
1
2
3
4
5
|
$scope.dateOptions = { // pass jQueryUI DatePicker options through
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd',
}
|
The options for angular-ui-date are the same as jQueryUI DatePicker. For further information see jQueryUI Datepicker for AngularJS.
1 <input>, Mozilla Developer Network
2 HTML5 Input Types, w3schools.com
3 “Does Angular use the jQuery library?”