A Date Range Picker for Bootstrap

Date Range Picker for Bootstrap

While developing Improvely, having all the components of Bootstrap at hand pre-styled was a great time saver.

I was in need of a dropdown menu to choose date ranges for reports, and wanted something that would match the existing dropdown and button styles of Bootstrap: thus came about this date range picker component. Download it at GitHub.

For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. For more advanced use cases, you can attach a date range picker to any element, pre-define your own date ranges for the user to choose from, and set a custom callback function to receive the chosen dates.

In 2013, the Date Range Picker was updated with many new options, including a time picker, min/max dates and max range, localization of all buttons/labels, dropdowns to jump between months/years and more.

Basic usage:

$('#element').daterangepicker(options, callback);

The examples below show how to use some of the options and callback parameters.

Pre-defined Ranges & Callback

September 23, 2014 - October 23, 2014

<div id="reportrange" class="pull-right">
    <i class="fa fa-calendar fa-lg"></i>
    <span><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?></span> <b class="caret""></b>

<script type="text/javascript">
      ranges: {
         'Today': [moment(), moment()],
         'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
         'Last 7 Days': [moment().subtract('days', 6), moment()],
         'Last 30 Days': [moment().subtract('days', 29), moment()],
         'This Month': [moment().startOf('month'), moment().endOf('month')],
         'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
      startDate: moment().subtract('days', 29),
      endDate: moment()
    function(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

Date & Time Picker

  <div class="form-group">
    <label for="reservationtime">Reservation dates:</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" name="reservation" id="reservationtime" class="form-control" value="07/10/2014 1:00 PM - 07/10/2014 1:30 PM" />

<script type="text/javascript">
$(document).ready(function() {
  $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
More examples and a complete list of options can be found at GitHub. Or, download the .ZIP archive.

  • Pingback: 50 Must-have plugins for extending Twitter Bootstrap | HeroSony

  • Gordon Leonard


  • Михаил Евстифеев

    Hi, Dan! I have a big trouble with DataRange. Try to go to Feb 15, 2014 – i can’t. We have no whole February month of 2014 year in this Data Range Calendar. (It’s by using Google Chrome) Please, try and help

  • http://www.improvely.com/ Dan Grossman

    I haven’t heard that before. http://i.imgur.com/YXNyWXj.png

  • Михаил Евстифеев

    Is it by Google Chrome browser&

  • http://www.improvely.com/ Dan Grossman

    Yes, that screenshot is from Google Chrome.

  • Михаил Евстифеев

    thanks, which your last datarangepicker file version?

  • Михаил Евстифеев
  • http://www.improvely.com/ Dan Grossman

    February is not missing there for me

  • Justin

    Hello Dan. Thank you for this wonderful app! I am trying to use ‘range’ feature with the calendar. However after I select a range and try to select a date, the calendars disappear. You can see what I am talking about here: http://inversepolymath.com/date/examples.html

  • http://www.improvely.com/ Dan Grossman

    Hi Justin. The UI is supposed to close after a date range is chosen. Making that selection is the function of a date range picker. If someone chooses one that you’ve predefined, they do not need to select any other date…

  • Justin

    I see. If an adjustment needs to be made the user would click in the ‘from’ and ‘to’ fields to enable the calendar. Makes perfect sense. Thank you for the prompt reply!

  • http://www.improvely.com/ Dan Grossman

    I think most would be more likely to click your “Custom Range” button which opens the calendars than to try to edit cut-off text boxes.

  • shabeermothi

    Great work! A cool relative date plugin in Bootstrap (Y)