This directive allows you to add a date-picker to your form elements.
- AngularJS
- JQuery
- JQueryUI
- Date.toISOString() (requires polyfill for ≤IE8)
We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
npm install -g grunt-cli npm install bower install grunt
The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test\test.config.js
We use bower for dependency management. Add
dependencies: {
"angular-ui-date": "latest"
}
To your bower.json
file. Then run
bower install
This will copy the ui-date files into your components
folder, along with its dependencies. Load the script files in your application:
<script type="text/javascript" src="components/jquery/jquery.js"></script>
<script type="text/javascript" src="components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/angular-ui-date/src/date.js"></script>
Add the date module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.date'])
Apply the directive to your form elements:
<input ui-date>
All the jQueryUI DatePicker options can be passed through the directive.
myAppModule.controller('MyController', function($scope) {
$scope.dateOptions = {
changeYear: true,
changeMonth: true,
yearRange: '1900:-0'
};
});
<input ui-date="dateOptions" name="DateOfBirth">
If you want a static picker then simply apply the directive to a div rather than an input element.
<div ui-date="dateOptions" name="DateOfBirth"></div>
The ui-date directive plays nicely with ng-model and validation directives such as ng-required.
If you add the ng-model directive to same the element as ui-date then the picked date is automatically synchronized with the model value.
The ui-date directive stores and expects the model value to be a standard javascript Date object.
The ui-date directive only works with Date objects. If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive. This directive specifies the format of the date string that will be expected in the ng-model. The format string syntax is that defined by the JQueryUI Date picker. For example
<input ui-date ui-date-format="DD, d MM, yy" ng-model="myDate">
Now you can set myDate in the controller.
$scope.myDate = "Thursday, 11 October, 2012";
If you apply the required directive to element then the form element is invalid until a date is picked.
Note: Remember that the ng-required directive must be explictly set, i.e. to "true". This is especially true on divs:
<div ui-date="dateOptions" name="DateOfBirth" ng-required="true"></div>