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

August 19, 2014 - September 18, 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.

  • Nicholai Bush

    Is there an easy way to toggle the datepicker?

  • Daniel Lu

    Very Nice. How can I set up to allow users to select on year base? It is very difficult to select a date 2 year ago.

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

    You’ll probably want to enable the `showDropdowns` option which adds month/year dropdowns above the calendar.

  • Neverfox

    This is a really nice plugin. Unfortunately, without the ability to disable arbitrary dates (and prevent ranges that contain disabled dates), it’s not something I can use. The examples of reservation systems are good examples, except that just about any reservation system needs to handle booked dates.

  • I_say_meh

    Too bad it’s not open source.

  • Neverfox

    Too bad pull requests are the only valid form of feedback.

  • Pingback: 50 Extensions and Plugins for Extending Bootstrap

  • Ant Dec

    Could you give me an example how to use an options of ‘dateLimit’, please?

  • Kicktickets

    Hi , its very useful , and i’ve one small clarification ? how can i disable past dates in Start date section?

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

    With the minDate option. All the options are listed on the github page and in the examples file.

  • Ant Dec

    How to use “dateLimit” options

  • Kicktickets

    Thanks a lot Dan… I’ve got solution ” this.minDate = moment().startOf(‘day’)”

  • Pingback: 50个Bootstrap扩展插件 | 数字生活 web前端资源,分享资源每一天!

  • Pingback: Designbreaker.ru — 15 расширений и плагинов для расширения возможностей Bootstrap. Часть 1.

  • Alex

    Take a look at this JQuery UI based implementation: http://tamble.github.io/jquery-ui-daterangepicker/

  • http://emamut.zz.mu/ Faber Vergara

    What a great job!

  • Pingback: A Selection Of The Most Useful jQuery Plugins For Bootstrap | Web design inspiration

  • Pingback: Geniale Bootstrap Erweiterungen für Jedermann

  • Pingback: Frontend Development | Experiencias Alfredo Bravo Cuero

  • Pingback: Useful JavaScript Libraries and jQuery Plugins | Smashing Magazine

  • Pingback: A date range picker | Twittstrap

  • Pingback: 最火的前端开源项目 - WEB开发笔记

  • Mustafa

    How I can set lacal for datepicker like june : “Haziran” in turkish?

  • Pingback: 50 Free new or latest, best, top, awesome or stylish mobile responsive, Bootstrap 3 plugins, demos or examples 2014 | Js Plugins

  • Pingback: jQuery Date Range picker for Twitter Bootstrap | Js Plugins

  • Pingback: jQuery Date Range picker for Twitter Bootstrap | Html Use

  • Pingback: 24 Extenções de Bootstrap para deixá-lo mais completo ainda! | Bons Tutoriais

  • Eric RAMAHATRA

    it works fine everywhere except on mobile device (or views on desktop with very small browser width) where i have strange behavior :

    the Start and End calendars are inverted : the Stard datepicker should be on Top of the End datepicker…
    Now i have the Start datepicker below the End datepicker…

    see http://dev.nexxus.fr/bankaccounts/view/28
    user : demo/demo/demo

  • Karthic Gajendran

    Awesome… Great work… Thanks for sharing

  • Pingback: olav.hjertaker » Twitter Bootstrap resources

  • mulder

    Nice work, and thanks.

  • Dmitry Eremeev

    nice, thank you

  • LucasG

    I love this Plugin !! Is excellent, smooth and simple. I was wondering how can I achieve a custom option to display only one calendar to pick up just ONE date.
    Thanks !!

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

    “More examples and a complete list of options can be found at GitHub.”

    Click on that link for your answer.

  • Pingback: 40 Extensions And Plugins For Extending Bootstrap | SmashingApps.com

  • Pingback: Six Great Bootstrap Helper Widgets - David Thomas

  • LucasG

    Yes, I know and I am aware of the singleDatePicker feature. But it is restrictive; I mean, or you use it as a range picker OR as a single date picker … What I was asking is the chance to get an option, just like the “Custom Range” option, named perhaps “Specific Date”, to display ONLY one calendar, so the user can pick up a specific date only … I cloned your repo and working on it (pretty slow though). When I consider it can be pulled I will be opening a PR for you to take a look at it and correct me/point me to the right/better solution.
    Thanks again !!

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

    You should probably have the “range vs single date” selection occurring before you present any kind of user interface to select dates, using a radio button perhaps. I’ve never seen a date range picker convert itself into a date picker in the wild. Users will not expect that UI.

  • LucasG

    Well, actually my dear friend; I work in a Company that uses reports pretty heavilly. And one of their legacy Apps (Those that I need to enhance and scale) has a daterange with several presets options: E.g ‘Today’,’Yesterday’,’This Week’,’Last Week’,’Month to date’,’Month through yesterday’,’Last Month’, ‘Custom Range’ AND ‘Specific Date’ which displays only one calendar so the user can pick up ANY (And just that one) date only … And let me tell you that is very deep adopted, since I asked the same thing as you !! And users are very used to it, because sometimes they watn to get a report for a range of dates; but sometimes they care about one specific date of a campaign performance …

    After the shock, I realized that is not a big deal (To think as they do). I mean I have a date input, I click on it, it displays me several options to select from, and the last two of them displays both calendars to choose a range, or just one to choose a single date … Is not that crazy. It always depends on the business needs.

    Now if are not in the mood of recieving PR, just let me know. I just wanted to somehow contribute value to your awesome project.

    Also if I am being unclear to explain my scenario, let me know and pardon me, since English is not my main speaking language

  • Pingback: 50 Free Bootstrap Resources, Tools, and Design | Design Posts

  • Pingback: 40 Extensions And Plugins For Extending Bootstrap | Web Design Articles From An Actual Living Web Professional

  • Joe

    Nice plugin, thanks!
    Only I am struggling with one issue. I am initialising a daterangepicker button with start and end dates which come from url. I am setting them via “startDate” and “endDate” config options or “setStartDate” and “setEndDate” methods. The remaining question is how to update the label after setting the dates?
    Is there any post init event in which I could specify the code similar to this one:
    $(‘#reportrange span’).html(start.format(‘MMMM D, YYYY’) + ‘ – ‘ + end.format(‘MMMM D, YYYY’));
    ?
    Thank you in advance.

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

    You have to do any initialization of your webpage yourself. At the same time you create the picker and set its dates would be appropriate. You can reuse the same code in your callback by wrapping it in a function.

  • Alex

    Hello, thank you for the really nice piece of work, one question: How can I set the start date of the week to Monday? I’m from Europe.

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

    Set the “firstDay” option to 1 in the locale object you pass to the picker when you create it. There is an example of changing the start of week to Monday in the examples.html file.

  • Pingback: Amazing Useful Bootstrap Plugins