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

A simple timepicker component for Twitter Bootstrap.

Base

<input type="text" class="form-control" id="timepicker-base">

<script>
  $(function() {
    $('#timepicker-base').timepicker();
  });
</script>
    Copy

Features

<input type="text" class="form-control" id="timepicker-features" data-show-inputs="false" data-show-seconds="true">

<script>
  $(function() {
    $('#timepicker-features').timepicker();
  });
</script>
    Copy

Input Add-on

ST 
<div class="input-group">
    <input type="text" class="form-control input-small" id="timepicker-addon">
    <span class="input-group-addon">ST</span>
</div>

<script>
  $(function() {
    $('#timepicker-addon').timepicker();
  });
</script>
    Copy

Modal

<input type="text" class="form-control" id="timepicker-modal" data-template="modal">

<script>
  $(function() {
    $('#timepicker-modal').timepicker();
  });
</script>
    Copy
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 

<div ng-app="ngTimepickerApp" ng-controller="ngTimepickerAppCtrl as ctrl">
  <input bootstrap-timepicker ng-model="ctrl.time" type="text" class="form-control">

  <br>

  <div class="input-group">
    <input bootstrap-timepicker ng-model="ctrl.time" type="text" class="form-control">
    <span class="input-group-addon">ST</span>
  </div>

  <br>

  <input bootstrap-timepicker ng-model="ctrl.time" template="'modal'" type="text" class="form-control">
</div>

<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/bootstrap-timepicker.js"></script> -->
<!-- <script src="assets/js/angular/pixeladmin/extensions/bootstrap-timepicker.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-bootstrap-timepicker.js"></script>

<script>
  angular.module('ngTimepickerApp', [ 'bootstrap-timepicker' ])
    .controller('ngTimepickerAppCtrl', function() {
      this.time = '10:25 AM';
    });
</script>
    Copy

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) { ... };
});
SETTINGS
THEMES