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

February 3, 2015 - March 5, 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>

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

  • 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


  • tiger huang

    Nice, thank you

  • Ampopo Makmur

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



    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


  • Rahul

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

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


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

  • Ajay Nair

    Excellent! Dan, only issue i am facing right now is a css issue i guess. When i add a picker to right side the whole thing is breaking. My screen is 1920×1080. an fix for it?

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

    You can use the “opens” option to tell it to expand to the left instead of to the right if you’re attaching it to something on the right-hand side of the page. It’ll also do that automatically if it’s attached to something with a “pull-right” class per Bootstrap.

  • Guest

    how to hide/remove “Custom Range” ?

  • Dhaval Tejlavwala

    how do i remove “Custom Range” ?

  • Behruz

    If I click on predefined range item I got an javascript error?

  • rtw_nz

    dateLimit: { days: 60 },