Examples

Add quick, dynamic timepicker functionality with any form text input.

Plugin dependency

Timepickers require the tooltip module and dateParser helper module to be loaded.

Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your timepickers.

Live demo

$scope.time = {{time}}; // (formatted: {{time | date:'shortTime'}})
$scope.selectedTimeAsNumber = {{selectedTimeAsNumber}}; // (formatted: {{selectedTimeAsNumber | date:'shortTime'}})
$scope.sharedDate = {{sharedDate}}; // (formatted: {{sharedDate | date:'short'}})
  


Usage

Append a bs-timepickerattribute to any element to enable the directive.

The module exposes a $timepickerservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTimepicker = $timepicker(element, ngModelController);
        
      

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

This module supports exotic placement options!

You can position your select in corners (such as bottom-left) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

timeFormat string 'shortTime'

Rendering format of your time, leverages ng.filter:date.

timeType string 'date'

Expected model type of your time - date | number | iso | string

autoclose boolean false

Whether the picker should close itself upon select.

useNative boolean true

Whether to use a native component if available (iOS/Android).

minTime date* -Infinity

Minimum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.

maxTime date* +Infinity

Maximum allowed time for selection (parsed against current format). You can use the string "now" that will resolve the current time.

length number 5

Length of the timepicker (should be an odd number).

hourStep number 1

Default step for hours.

minuteStep number 5

Default step for minutes.

Default options

You can override global defaults for the plugin with $timepickerProvider.defaults

        
          angular.module('myApp')
          .config(function($timepickerProvider) {
            angular.extend($timepickerProvider.defaults, {
              timeFormat: 'HH:mm',
              length: 7
            });
          })