Angular.js directive for Dan Grossmans's Bootstrap Datepicker.
Beware: Not compatible with Bootstrap Datepicker v 2.x! Use 1.3.x instead!
The easiest way to install the picker is:
bower install angular-daterangepicker --save
This directive depends on Bootstrap Datepicker, Bootstrap, Moment.js and jQuery. Download dependencies above and then use minified or normal version.
Assuming that bower installation directory is bower_components. In case of other installation directory, please update paths accordingly.
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
Declare dependency:
App = angular.module('app', ['daterangepicker']);
Prepare model in your controller. The model must have startDate and endDate attributes:
exampleApp.controller('TestCtrl', function ($scope) {
$scope.datePicker.date = {startDate: null, endDate: null};
}
Then in your HTML just add attribute date-range-picker to any input and bind it to model.
<div ng-controller="TestCtrl">
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />
</div>
See example.html for working demo.
Do not forget to add a dot (.) in your model object to avoid issues with scope inheritance. E.g. use $scope.datePicker.date instead of $scope.date.
Min and max value can be set via additional attributes:
<input date-range-picker class="form-control date-picker" type="text" ng-model="date" min="'2014-02-23'" max="'2015-02-25'"/>
The date picker can be further customized by passing in the options attribute.
<input date-range-picker class="form-control date-picker" type="text" ng-model="date"
min="'2014-02-23'" max="'2015-02-25'" options="{separator: ":"}"/>
Optionally, event handlers can be passed in through the eventHandlers attribute of options.
<input date-range-picker class="form-control date-picker" type="text" ng-model="date"
options="{eventHandlers: {'show.daterangepicker': function(ev, picker) { ... }}}"/>
All event handlers from the Bootstrap daterangepicker are supported. For reference, the complete list is below:
show.daterangepicker: Triggered when the picker is shown
hide.daterangepicker: Triggered when the picker is hidden
showCalendar.daterangepicker: Triggered when the calendar is shown
hideCalendar.daterangepicker: Triggered when the calendar is hidden
apply.daterangepicker: Triggered when the apply button is clicked
cancel.daterangepicker: Triggered when the cancel button is clicked
Not compatible with Bootstrap Datepicker v 2.x! Use 1.3.x instead!
Version > 0.1.1 requires Bootstrap Datepicker 1.3.3 and newer.
The PRs are more than welcome – thank you for those.
Please send PRs only for *.coffee code. Javascript and minified Javascript should be generated with grunt dist command
just before the commit.