ui-date directive

This directive allows you to add a date-picker to your form elements.

Alternatives

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.

Requirements

JQuery
JQueryUI
AngularJS

Bower Usage

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:

<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>

Load the script files in your application:

<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-date/dist/date.js"></script>

Add the date module as a dependency to your application module:

angular.module('MyApp', ['ui.date'])

Apply the directive to your form elements:

<input ui-date>

Options

All the jQueryUI DatePicker options can be passed through the directive including minDate, maxDate, yearRange etc.

myAppModule.controller('MyController', function($scope) {
  $scope.dateOptions = {
    changeYear: true,
    changeMonth: true,
    yearRange: '1900:-0',    
    };
});

then pass through your options:

    <input ui-date="dateOptions" name="DateOfBirth">

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">

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>

focusing the next element for tabbing

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.

myAppModule.controller('MyController', function($scope) {
  $scope.dateOptions = {
      onClose: (value, picker, $element) => {
        $element.focus()
      }
    };
});

Usage with webpack

Install with npm:

npm install --save-dev jquery jquery-ui angular angular-ui-date

Use in your app:

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.

    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

    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',
                   },
                ]
              }
            }

Need help?

Need help using UI date?

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

Found a bug?

Please take a look at CONTRIBUTING.md.

Contributing to the project

We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.

angular-ui/ui-date