Improve this Doc  View Source

input[date]

  1. - input in module ng

Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06. Since many modern browsers do not yet support this input type, it is important to provide cues to users on the expected input format via a placeholder or label.

The model must always be a Date object, otherwise Angular will throw an error. Invalid Date objects (dates whose getTime() is NaN) will be rendered as an empty string.

The timezone to be used to read/write the Date instance in the model can be defined using ngModelOptions. By default, this is the timezone of the browser.

Directive Info

Usage

<input type="date"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

Arguments

Param Type Details
ngModel string

Assignable angular expression to data-bind to.
name
(optional)
 string

Property name of the form under which the control is published.
min
(optional)
 string

Sets the min validation error key if the value entered is less than min. This must be a valid ISO date string (yyyy-MM-dd). You can also use interpolation inside this attribute (e.g. min="{{minDate | date:'yyyy-MM-dd'}}"). Note that min will also add native HTML5 constraint validation.
max
(optional)
 string

Sets the max validation error key if the value entered is greater than max. This must be a valid ISO date string (yyyy-MM-dd). You can also use interpolation inside this attribute (e.g. max="{{maxDate | date:'yyyy-MM-dd'}}"). Note that max will also add native HTML5 constraint validation.
ngMin
(optional)
 datestring

Sets the min validation constraint to the Date / ISO date string the ngMin expression evaluates to. Note that it does not set the min attribute.
ngMax
(optional)
 datestring

Sets the max validation constraint to the Date / ISO date string the ngMax expression evaluates to. Note that it does not set the max attribute.
required
(optional)
 string

Sets required validation error key if the value is not entered.
ngRequired
(optional)
 string

Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange
(optional)
 string

Angular expression to be executed when input changes due to user interaction with the input element.

Example

  Edit in Plunker 
<script>
   angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.example = {
         value: new Date(2013, 9, 22)
       };
     }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a date in 2013:</label>
   <input type="date" id="exampleInput" name="input" ng-model="example.value"
       placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.date">
         Not a valid date!</span>
    </div>
    <tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
var value = element(by.binding('example.value | date: "yyyy-MM-dd"'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('example.value'));

// currently protractor/webdriver does not support
// sending keys to all known HTML5 input controls
// for various browsers (see https://github.com/angular/protractor/issues/562).
function setInput(val) {
  // set the value of the element and force validation.
  var scr = "var ipt = document.getElementById('exampleInput'); " +
  "ipt.value = '" + val + "';" +
  "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
  browser.executeScript(scr);
}

it('should initialize to model', function() {
  expect(value.getText()).toContain('2013-10-22');
  expect(valid.getText()).toContain('myForm.input.$valid = true');
});

it('should be invalid if empty', function() {
  setInput('');
  expect(value.getText()).toEqual('value =');
  expect(valid.getText()).toContain('myForm.input.$valid = false');
});

it('should be invalid if over max', function() {
  setInput('2015-01-01');
  expect(value.getText()).toContain('');
  expect(valid.getText()).toContain('myForm.input.$valid = false');
});