Timepicker http://jdewit.github.io/bootstrap-timepicker

A simple timepicker component for Twitter Bootstrap.

Base

Features

Input Add-on

ST

Modal

See the usage documentation at http://jdewit.github.io/bootstrap-timepicker

Usage


require(['jquery', 'px/extensions/bootstrap-timepicker'], function($) {
  ...
});

Usage

To use bootstrap-timepicker plugin, you need to include the next scripts:


<script src="path/to/js/libs/bootstrap-timepicker.js"></script>
<script src="path/to/js/pixeladmin/extensions/bootstrap-timepicker.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-bootstrap-timepicker.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['bootstrap-timepicker']);

Alternatively, you can include bootstrap-timepicker plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    serie: true,
    name: 'bootstrap-timepicker',
    files: [
      'path/to/js/libs/bootstrap-timepicker.js',
      'path/to/js/pixeladmin/extensions/bootstrap-timepicker.js',
      'path/to/js/pixeladmin/directives/angular-bootstrap-timepicker.js',
    ],
  },
]);

bootstrap-timepicker directive

bootstrap-timepicker directive requires ngModel to be on the element.

You can use bootstrap-timepicker directive where you want. And when the scope is destroyed the directive will be destroyed.


ST

Instance

You can define instance attribute to get a pointer to bootstrap-timepicker element: 


<input bootstrap-timepicker instance="ctrl.$timepicker" ng-model="someModel" type="text" class="form-control">
        

function SomeController() {
  // Pointer
  this.$timepicker = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$timepicker('showWidget');
  this.$timepicker('setTime', '12:45 AM');
});

Options

bootstrap-timepicker' options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

Options marked with have an angular $watch listener applied to it.
  • append-widget-to
  • default-time
  • disable-focus
  • disable-mousewheel
  • explicit-mode
  • icons
  • max-hours
  • minute-step
  • modal-backdrop
  • second-step
  • show-inputs
  • show-meridian
  • show-seconds
  • snap-to-step
  • template

<input bootstrap-timepicker ng-model="someModel" type="text" class="form-control"
       template="'modal'"
       snap-to-step="true"
       minute-step="5">

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-change-time
  • on-hide
  • on-show

<input bootstrap-timepicker ng-model="someModel" type="text" class="form-control"
       on-change-time="ctrl.changeTime"
       on-hide="ctrl.hide"
       on-show="ctrl.show">
        

function SomeController() {
  this.changeTime = function(e) { ... };
  this.hide = function(e) { ... };
  this.show = function(e) { ... };
});