require(['jquery', 'px/extensions/bootstrap-datepicker'], function($) {
...
});
To use datepicker plugin, you need to include the next scripts:
<script src="path/to/js/libs/bootstrap-datepicker.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-bootstrap-datepicker.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['bootstrap-datepicker']);
Alternatively, you can include datepicker plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'bootstrap-datepicker',
files: [
'path/to/js/libs/bootstrap-datepicker.js',
'path/to/js/pixeladmin/directives/angular-bootstrap-datepicker.js',
],
},
]);
bootstrap-datepicker
directive
You can use bootstrap-datepicker
directive where you want.
And when the scope is destroyed the directive will be destroyed.
date
attribute
date
has a two-way data binding:
<input bootstrap-datepicker date="ctrl.dateModel" type="text" class="form-control">
<input bootstrap-datepicker date="ctrl.multidateModel" multidate="true" type="text" class="form-control">
<div bootstrap-datepicker date="ctrl.dateRangeModel" class="input-daterange input-group">
...
</div>
You can define instance
attribute to get a pointer to datepicker element:
<input bootstrap-datepicker type="text" class="form-control" instance="ctrl.$datepicker">
function SomeController() {
// Pointer
this.$datepicker = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$datepicker('show');
this.$datepicker('getUTCDate');
});
datepicker's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<input bootstrap-datepicker type="text" class="form-control"
calendar-weeks="true"
today-btn="'linked'"
clear-btn="true">
Event handlers can be bound using attributes (see the plugin's documentation):
<input bootstrap-datepicker type="text" class="form-control"
on-show="ctrl.show"
on-hide="ctrl.hide"
on-change-date="ctrl.changeDate">
function SomeController() {
this.show = function(e) { ... }
this.hide = function(e) { ... }
this.changeDate = function(e) { ... }
});