Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

ui-date directive

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


  • JQuery
  • JQueryUI


Load the script file: date.js in your application:

<script type="text/javascript" src="modules/directives/date/src/date.js"></script>

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

var myAppModule = angular.module('MyApp', [''])

Apply the directive to your form elements:

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


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.

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>
Something went wrong with that request. Please try again.