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

December 28, 2014 - January 27, 2015


<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.

  • shiva

    I need to give user to select only sixty days from the past by keeping present date,

  • http://blacksmoke.plutohost.net/ Junaid Atari

    بہت زبردست،
    very cool stuff.

  • swaroop

    awesome work

  • mr_jones

    Really, really good. Only issue I’m finding is that if my date field are towards the fold or the bottom of the page the date picker goes off the bottom and you don’t even get scroll bars to scroll down to the picker.
    It needs to determine its placement and render above the field if it can’t fit below.

    Other than that – truly excellent.

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

    Or you can be responsible for the design of your own page.

  • http://blacksmoke.plutohost.net/ Junaid Atari

    best!

  • tiger huang

    Nice, thank you

  • Ampopo Makmur

    Hello, i want this daterangepicker is always visible? have any idea?

    Thanks

  • MAHA RAJA

    Hi, I want updation of start date and end date for relative range selection like ‘Today’, ‘last 15 minutes’ etc.
    It is initialised with values at start. Instead it might call moment() every time and get current updated time.
    Is there any possibility for it?

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

    No

  • Rahul

    This is awesome thanks!
    How do I combine the two calendars into one calendar?

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

    You…don’t?

  • Rahul

    Haha yeah I wanted to have functionality so that I can choose both the “from” and “to” dates in one calendar. Any idea how I would modify the code to do that?

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

    That’d probably take almost as much code as starting from scratch. You should look for a different calendar thing that already does that.