# Date Range Picker for Angular and Bootstrap ![Dependencies](https://david-dm.org/fragaria/angular-daterangepicker.png) Angular.js directive for Dan Grossmans's [Bootstrap Datepicker](https://github.com/dangrossman/bootstrap-daterangepicker). ![Date Range Picker screenshot](http://i.imgur.com/zDjBqiS.png) ## Installation via Bower The easiest way to install the picker is: ``` bower install angular-daterangepicker --save ``` ## Manual installation This directive depends on [Bootstrap Datepicker](https://github.com/dangrossman/bootstrap-daterangepicker), [Bootstrap](http://getbootstrap.com), [Moment.js](http://momentjs.com/) and [jQuery](http://jquery.com/). Download dependencies above and then use [minified](js/angular-daterangepicker.min.js) or [normal](angular-daterangepicker.js) version. ## Basic usage Assuming that bower installation directory is `bower_components`. In case of other installation directory, please update paths accordingly. ``` ``` 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. ```