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

October 1, 2014 - October 31, 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>
</div>

<script type="text/javascript">
$('#reportrange').daterangepicker(
    {
      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'));
    }
);
</script>

Date & Time Picker

<form>
  <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" />
    </div>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
  $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
});
</script>
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

    wow!!!!

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

    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)

  • Pingback: SUN:)DAY SHARING | M_egemen_Ö()

  • Lisa Walker

    Hi Dan, this is really nice. I was just wondering if it is possible to set some type of option to disable specific days of the week. I still need the range to work, but want to try and restrict the start and end selection days to a day of the week. Similar to using this daysOfWeekDisabled: “0,2,3,4,5,6” when you use the regular datepicker. Thanks very much.

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

    There is no option like that.

  • kayday

    Please give me an example on how to get the selected range in the callback instead of just start and end dates. Thanks!

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

    It’s the third parameter passed to your callback. It’s in the documentation and examples.html file.

  • kayday

    Thanks. The callback does not work in IE. I dynamically create the controls on a bootstrap modal. On the modal, there could be many date range pickers. So after the selector, i did an .each(function() { $(this).daterangepicker(); }); debugger; doesnt even get hit in IE. What am I missing? It works in Chrome however. Really appreciate your help

  • kayday

    Also, clicking Custom Range does not populate additional pickers

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