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.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

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.

See original documentation.

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.