Angular Datetime Demo Page

Reset Clear

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

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

Min / Max

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

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" min="Jan 1, 2010" max="Dec 31, 2019">

Required

You won't be able to clear this field if required. You can still set the model value to null though.

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" required>

Use ng-require.

Model format

You can use a date string instead of date object as model value.

myDateString = {{data.myDateString | json}}

<input type="text" datetime="medium" datetime-model="yyyy-MM-dd HH:mm:ss" ng-model="myDateString">

Show UTC time

By the default, angular-datetime will format view value in local timezone. Add datetime-utc attribute to show UTC time to users.

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" datetime-utc>

Also support expression.

<label class="checkbox"><input type="checkbox" ng-model="isUtc">Show UTC</label>
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control" datetime-utc="isUtc">

Localizable formats

The parser supports localizable formats in angular.

Other tests

{{data.myDateString2 | json}}

Custom separator

Used to jump on the next segment when pressing separator key. In this example angular-datetime will jump on the next segment when pressing . or ,.