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">

Default value

If the field is empty and the input element is focused, the directive will use `default` attribute as its initial value.

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" class="form-control" default="Jan 1, 2000">

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>

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>

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 `,`.