<input type="text" class="form-control" id="timepicker-base">
<script>
$(function() {
$('#timepicker-base').timepicker();
});
</script>
Copy<input type="text" class="form-control" id="timepicker-features" data-show-inputs="false" data-show-seconds="true">
<script>
$(function() {
$('#timepicker-features').timepicker();
});
</script>
Copy<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<input type="text" class="form-control" id="timepicker-modal" data-template="modal">
<script>
$(function() {
$('#timepicker-modal').timepicker();
});
</script>
Copyrequire(['jquery', 'px/extensions/bootstrap-timepicker'], function($) {
...
});
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
directivengModel
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.
<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
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');
});
bootstrap-timepicker' options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<input bootstrap-timepicker ng-model="someModel" type="text" class="form-control"
template="'modal'"
snap-to-step="true"
minute-step="5">
Event handlers can be bound using attributes (see the plugin's documentation):
<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) { ... };
});