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

November 23, 2014 - December 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>
</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
  • kayday

    :( the suggested workarounds do not work for me. Any other suggestions?

  • kamran akhter

    nice control, but it does not show years when clicking on year like datepicker

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

    Showing month and year dropdowns above the calendars is an option you can enable.

  • Balius

    Thanks for this nice plugin!
    A quick question regarding pre-defined ranges: is it possible anyhow to have a dynamic pre-defined range, e.g. user selects start date and then chooses from the options “for one week” or “for one month”?

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

    No

  • Dmitriy P

    Nice work, I do have an issue when using in Date & Time mode. The problem is also on this page.
    When selecting hours & minutes for the first time in the picker – it works great. However, when you click on the picker again and change only time without changing the date – it doesn’t let you to apply. When you change the date however – it will take both new date & time. Thank you.

  • Pingback: oliver()

  • Pingback: Bootstrap 15个必备扩展插件 | 好摄之徒()

  • Pingback: Hugh()

  • Pingback: Jackie()

  • Pingback: 修复bootstrap daterangepicker中的3个问题 – 快乐八哥 | 查问题()

  • Pingback: Date Range Picker for Bootstrap | Life Without Limited()

  • Marc Stalfoort

    Hey Dan, awesome stuff.
    Is it possible to have the daterange also inline instead of position:absolute?

  • Pingback: mark()

  • http://www.codehenge.net Constantine Aaron Cois

    Great plugin. Having one small issue – for some reason mine is loading without a range initialize, even though I’m setting startDate and endDate in the daterangepicker constructor. Any ideas?

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

    I can’t help you debug that from just a description. There is *always* some start and end date currently chosen internally, whether you pass them in or the defaults are used.

  • http://www.codehenge.net Constantine Aaron Cois

    Let me see if I can reproduce in a jsfiddle. It seems to not be loading any default, because the calendar glyphicon is the only thing visible in the element on load. Once I select a range, the expected date becomes visible in addition to the glyphicon.

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

    Calendar glyphicon? Are you talking about something like the first example above? The date range picker does not initialize any other UI on your webpage. In the example, the dates next to the calendar icon were written there with PHP code, as you can see in the code box below it.

  • http://www.codehenge.net Constantine Aaron Cois

    So it looks like I didn’t understand what the startDate and endDate constructor parameters do. For some reason, I figured the callaback which set the date would be called once on load. Fixed now. Thanks!

  • Jamison

    Dan YOU ARE RAD. Nice work my man, thanks for sharing this.

  • Sean Huber

    A tiny FYI: the moment syntax for subtracting days/month is deprecated.

    Deprecation warning: moment().subtract(period, number) is deprecated. Please use moment().subtract(number, period).

    I see you have your examples.html updated on the github page though.

    Very nice work, I love this plugin.

  • Pingback: Oliver()

  • Frank J

    you show no examples of translations or localisations in https://github.com/dangrossman/bootstrap-daterangepicker/blob/master/examples.html, any input on how to show a specific language from my var = ‘fr'; ?

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

    You are overlooking the ‘locale’ option, which is shown in that link.