blob: 71f15d9332578cd1647295da9e05de5b88498e84 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
# ui-date directive
This directive allows you to add a date-picker to your form elements.
# Requirements
- JQuery
- JQueryUI
- [Date.toISOString()](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/toISOString) (requires [polyfill](https://github.com/kriskowal/es5-shim/) for ≤IE8)
# Usage
Load the script file in your application:
<script type="text/javascript" src="angular-ui.js"></script>
Add the date module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.directives'])
Apply the directive to your form elements:
<input ui-date name="DateOfBirth"></input>
## Options
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"></input>
## Static Inline Picker
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>
# Working with ng-model
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._
## ui-date-format directive
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"></input>
Now you can set myDate in the controller.
$scope.myDate = "Thursday, 11 October, 2012";
## ng-required directive
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>
|
