require(['jquery', 'px-libs/daterangepicker'], function($) {
...
});
To use daterangepicker plugin, you need to include the next scripts:
<script src="path/to/js/libs/moment.js"></script>
<script src="path/to/js/libs/daterangepicker.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-daterangepicker.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['daterangepicker']);Alternatively, you can include daterangepicker plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
serie: true,
name: 'daterangepicker',
files: [
'path/to/js/libs/moment.js',
'path/to/js/libs/daterangepicker.js',
'path/to/js/pixeladmin/directives/angular-daterangepicker.js',
],
},
]);
daterangepicker directivestart-date attribute to be on the element.
You can use daterangepicker directive where you want.
And when the scope is destroyed the directive will be destroyed.
start-date and end-date attributes
start-date and end-date attributes have a two-way data binding:
<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control">
<input daterangepicker start-date="dateModel" single-date-picker="true" type="text" class="form-control">
daterangepicker's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control"
show-dropdowns="true"
opens="'left'"
button-classes="['btn', 'btn-outline']">
Event handlers can be bound using attributes (see the plugin's documentation):
<input daterangepicker start-date="startDateModel" end-date="endDateModel" type="text" class="form-control"
on-apply="ctrl.apply"
on-cancel="ctrl.cancel"
on-show-calendar="ctrl.showCalendar">
function SomeController() {
this.apply = function(e, picker) { ... }
this.cancel = function(e, picker) { ... }
this.showCalendar = function(e, picker) { ... }
});