Angular.js directive for Dan Grossmans's Bootstrap Datepicker.
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.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="date" />
</div>
See example.html
for working demo.
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
Version > 0.1.1 requires Bootstrap Datepicker 1.3.3 and newer.
Version 0.1.0 works with Bootstrap Datepicker 1.3.2 and older.
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.