GitHub - angular-ui/ui-date: jQuery UI Datepicker for AngularJS (original) (raw)

ui-date directive Build Status

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

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:

Load the script files in your application:

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

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

Apply the directive to your form elements:

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.

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

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:

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?

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.