This directive allows you to add a date-picker to your form elements.
npm install angular-ui-dateThis directive allows you to add a date-picker to your form elements.
We recommend using the excellent ui-bootstrap date-picker which is maintained by a larger team.
WARNING: Support for this module may eventually be phased out as angular 2.0 arrives as there are no plans to move this to angular 2 at this time.
- JQuery
- JQueryUI
- AngularJS
You may use bower for dependency management but would recommend using webpack or browserify for modules.
Install and save to bower.json by running:
bower install angular-ui-date --save
This will copy the ui-date files into your bower_components folder, along with its dependencies.
Add the css:
``html`
Load the script files in your application:
`html`
Add the date module as a dependency to your application module:
`js`
angular.module('MyApp', ['ui.date'])
Apply the directive to your form elements:
`html`
All the jQueryUI DatePicker options can be passed through the directive.
`js`
myAppModule.controller('MyController', function($scope) {
$scope.dateOptions = {
changeYear: true,
changeMonth: true,
yearRange: '1900:-0'
};
});
`html`
If you want a static picker then simply apply the directive to a div rather than an input element.
`html`
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
`html`
Now you can set myDate in the controller.
`js`
$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:
`html`
There is a problem with IE that re-opens the datepicker on focus(). However, this breaks tabbing. If tabbing is more
important than IE for your use cases, pass in the onClose option.
`javascript`
myAppModule.controller('MyController', function($scope) {
$scope.dateOptions = {
onClose: (value, picker, $element) => {
$element.focus()
}
};
});
Install with npm:
npm install --save-dev jquery jquery-ui angular angular-ui-date
Use in your app:
`javascript
import angular from 'angular';
import uiDate from 'angular-ui-date';
require('jquery-ui/themes/base/minified/jquery-ui.min.css');
angular.module('MyTest', [uiDate.name])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.myDate = new Date('2015-11-17');
}]);
`
It is also good to ensure that jQuery is available so that angular and jquery ui can attach to it.
`javascript`
webpack: {
plugins: [
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
}),
]
}
another method of making jQuery recognized is to use the webpack expose-loader to expose it both as $ and jQuery
`javascript``
webpack: {
module: {
loaders: [
// it helps angular to have jQuery exposed so that it uses $ instead of jqLite
{
test: require.resolve('jquery'),
loader: 'expose?$!expose?jQuery',
},
]
}
}
* Ask a question in StackOverflow under the angular-ui-date tag.
Please do not create new issues in this repository to ask questions about using UI date
We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.