Angular directive for Dan Grossman's bootstrap-daterangepicker.



Using bower:

Using npm:

How to use it

You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:

to the list above, you should add:

Then, inject ngBootstrap in your application module:

and then just add an input of type daterange:

The result object $scope.myDateRange has a startDate and endDate properties, which are instances of moment().

Implemented features so far

  • startDate, endDate: are taken from the ng-model object;
  • minDate, maxDate: mapped from min-date and max-date attributes;
  • dateLimit: mapped from limit attribute;
  • format: mapped from format attribute;
  • separator: mapped from separator attribute.

Example with all above features:

The limit attribute lets you specify a number and unit similarly as you would invoke moment.duration().

Features to be implemented:

  • ranges
  • timePicker*
  • show*
  • other formatting options like *Class and stuff


You can run the tests by running

assuming you already have grunt installed, otherwise you also need to do:

comments powered by Disqus
This page was last updated about 5 years ago.