Overview

Input with datetime validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local datetime format (yyyy-MM-ddTHH:mm:ss), for example: 2010-12-28T14:57:00.

The model must always be a Date object, otherwise AngularJS 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.

The format of the displayed time can be adjusted with the ngModelOptions timeSecondsFormat and timeStripZeroSeconds.

Directive Info

This directive executes at priority level 0.

Usage

<input type="datetime-local"
       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 AngularJS 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 datetime format (yyyy-MM-ddTHH:mm:ss). You can also use interpolation inside this attribute (e.g. `min="{{minDatetimeLocal \| date:'yyyy-MM-ddTHH:mm:ss'}}"`). 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 datetime format (yyyy-MM-ddTHH:mm:ss). You can also use interpolation inside this attribute (e.g. `max="{{maxDatetimeLocal \| date:'yyyy-MM-ddTHH:mm:ss'}}"`). Note that `max` will also add native HTML5 constraint validation.
ngMin (optional)	date string	Sets the `min` validation error key to the Date / ISO datetime string the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.
ngMax (optional)	date string	Sets the `max` validation error key to the Date / ISO datetime 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	AngularJS expression to be executed when input changes due to user interaction with the input element.

Example

<script>
  angular.module('dateExample', [])
    .controller('DateController', ['$scope', function($scope) {
      $scope.example = {
        value: new Date(2010, 11, 28, 14, 57)
      };
    }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label for="exampleInput">Pick a date between in 2013:</label>
  <input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"
      placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
    <span class="error" ng-show="myForm.input.$error.datetimelocal">
        Not a valid date!</span>
  </div>
  <tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</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-ddTHH:mm:ss"'));
var valid = element(by.binding('myForm.input.$valid'));

// currently protractor/webdriver does not support
// sending keys to all known HTML5 input controls
// for various browsers (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('2010-12-28T14:57:00');
  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-01T23:59:00');
  expect(value.getText()).toContain('');
  expect(valid.getText()).toContain('myForm.input.$valid = false');
});