Angular Timepicker Directive Demo

This directive creates a simple dropdown style timepicker, like the one used in Google Calendar.

Basic

The minimum requirement to start using the time picker is to add the dn-timepicker directive as an attribute to an input field, as well as specifying the model used using the ng-model attribute.

<input type="text" dn-timepicker ng-model="models.time" />

Range

You can restrict input values to a predetermined range. The range values should follow the time format used.

<input type="text" dn-timepicker="h:mm a" ng-model="models.time" min-time="9:00 am" max-time="5:00 pm" />

Dynamic Range & Format

You can change the format and range on-the-fly, should you need it, and the directive will take care of updating the view and the list.

// Model
$scope.models = {
    time: new Date(),
    format: 'h:mm a',
    minTime: '9:00 am',
    maxTime: '9:00 pm',
    step: '15'
};

<input type="text" dn-timepicker="{{models.format}}" ng-model="models.time" min-time="{{models.minTime}}" max-time="{{models.maxTime}}" step="{{models.step}}" />