Angular Datetime Demo Page

To use the directive, add datetime="date-format" attribute to your input.

myDate = {{data.myDate | json}}
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

To set a date, just set your model to a Date object. Set to null to remove it.

<button ng-click="myDate = new Date">reset</button>

min / max

Validation for min/max date. The min/max attribute will be used to construct the date object.

input.$error = {{minmaxForm.input.$error | json}}
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" min="Jan 1, 2010" max="Dec 31, 2019">

required

ng-invalid-required will be added to the class list when all parts are empty.

input.$error = {{requireForm.input.$error | json}}
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" required>

Use ng-require.

input.$error = {{ngRequireForm.input.$error | json}}

model-format

With this attribute, it will convert the model into a date string automatically.

myDateString = {{data.myDateString | json}}
<input type="text" datetime="medium" datetime-model="yyyy-MM-dd HH:mm:ss" ng-model="myDateString">

datetime-timezone

By the default, angular-datetime will format the date in the local timezone. Use datetime-timezone to specify a different timezone.

myDate = {{data.myDate | json}}
<input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="myDate" datetime-timezone="+0000">

Also support expression.

myDate = {{data.myDate | json}}
myTimezone = {{data.myTimezone | json}}
<input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="myTimezone">

datetime-separator

By the default, you can use left/right keys to navigate between each part of date. With this attribute, you will be able to use different keys to jump to next part.

<input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",.-/">

Localizable formats

The parser supports localizable formats in Angular.

Other tests