Dan Grossman

A date range picker for Twitter Bootstrap

While developing Improvely, having all the components of Twitter 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.

The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

Usage:

$('#element').daterangepicker(options, callback);

The examples below show how to use the (optional) options and callback parameters.

Simple Example

<form class="form-horizontal">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="reservation">Reservation dates:</label>
      <div class="controls">
        <div class="input-prepend">
          <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="reservation" id="reservation" />
        </div>
      </div>
    </div>
  </fieldset>
</form>

<script type="text/javascript">
$(document).ready(function() {
	$('#reservation').daterangepicker();
});
</script>

Pre-defined Ranges & Callback Example

April 25, 2013 - May 25, 2013

<div id="reportrange" class="pull-right">
    <i class="icon-calendar icon-large"></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': ['today', 'today'],
            'Yesterday': ['yesterday', 'yesterday'],
            'Last 7 Days': [Date.today().add({ days: -6 }), 'today'],
            'Last 30 Days': [Date.today().add({ days: -29 }), 'today'],
            'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
            'Last Month': [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })]
        }
    }, 
    function(start, end) {
        $('#reportrange span').html(start.toString('MMMM d, yyyy') + ' - ' + end.toString('MMMM d, yyyy'));
    }
);
</script>

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

It’s possible to show an error message or something in your callback after the range is selected. It’s not possible to tell the range picker to enforce that for you unless you add your own code to do so.
Pingback: ПАРОЧКИ – Подборка полезного для любителей Twitter Bootstrap
Trieunguyen1988

How to display 3 month instead 2 month.
http://www.improvely.com/ Dan Grossman

Why would you want 3 calendars on screen?
Justin

How do you get it to read an existing value in the input? Seems it always just defaults to today.
http://www.improvely.com/ Dan Grossman

It will parse the input if the value it contains matches the default date format and separator values. If it’s in a different format, you either need to set those format options or specify the start and end date options when you create the picker. You can view the source of this page or look at the examples file in the repository for the options syntax.

If the picker can’t parse the input, and you don’t specify a start and end date, the current date is used. Also be sure you’ve downloaded the code recently, as this behavior changed in just the past week.
Justin

Thanks Dan. I’m actually using Yiibooster for Yii which utilises your datarange picker. I’ll see about upgrading the components used from your most recent pushes.
Justin

Whoops, didn’t reply to your actual comment. Anyway, I just updated the js and it’s working perfectly now.

Thanks again!
Роман Богатов

Added Multirange selection https://github.com/xames/calendar-multirange
Raz

I needed to be able to update the control based on actions taken outside of the calendar. I don’t want to impose my style on the plug-in but I want to contribute. So here are the changes I made. I figured others might need to do the same thing.

I added the following method.

updateDates: function (options) { // make sure dates are valid if(typeof options.startDate !== ‘object’ || !(options.startDate instanceof Date)) { console.log(‘Daterangepicker: startDate is not a valid date’); return; } if(typeof options.endDate !== ‘object’ || !(options.endDate instanceof Date)) { console.log(‘Daterangepicker: endDate is not a valid date’); return; } this.startDate = options.startDate; this.endDate = options.endDate; this.container.find(‘.calendar’).show(); //update the calendars this.leftCalendar.month.set({month: this.startDate.getMonth(), year: this.startDate.getFullYear()}); this.rightCalendar.month.set({month: this.endDate.getMonth(), year: this.endDate.getFullYear()}); this.updateCalendars(); this.changed = true; this.hide();}

and then I update the initialization of the plugin

if (!el.data(‘daterangepicker’)) { el.data(‘daterangepicker’, new DateRangePicker(el, options, cb));} else { if(typeof options == ‘object’) { if(options.action !== undefined) { switch(options.action) { case ‘update’: dp = el.data(‘daterangepicker’); dp.updateDates(options); break; } } }}
Pingback: An Awesome Date Range Picker for Twitter Bootstrap
guest

what is the option for changing the direction?
Dragan

Sweeet, nice work – thank you! For the “Pre-defined Ranges & Callback Example”, I would suggest to hide the start and end input fields, unless the user select on custom range. I think it would make the whole thing a bit cleaner.
Bogdan

Hi and thanks for the great work.

I’m trying to use your script in a page, but I can’t seem to be able to modify the timezone for all the ranges. From what I see, it defaults to UTC, but I would need to change it for PST. Is that possible?

I’ve tried the Date.today().setTimezoneOffset and Date.today().setTimezone, but nothing works
http://www.improvely.com/ Dan Grossman

The DRP/Date.js has no concept of a time zone setting AFAIK. Your individual computer’s time is what determines what today is. If you change your system clock to say today is March 30th, then “today” will be March 30th in JavaScript. If it looks like UTC to you, it’s probably because your system clock is set to UTC.
http://taylorbrooks.org/ Taylor Brooks

When selecting a custom range, it’s not intuitive that to select a range within the same month, you have to use the left calendar first, then the right calendar.

Not sure why you would ever show the same month beside itself. http://cl.ly/image/2n3w470E2J3M

Seems like a common paradigm to have the 1st click be the start date and the 2nd click be the end date.
http://www.improvely.com/ Dan Grossman

“Not sure why you would ever show the same month beside itself”

If there weren’t two calendars there, how would one change one to choose dates not within the same month?
http://taylorbrooks.org/ Taylor Brooks

Sorry, having trouble understanding your question. Hopefully this answers it…

I’m not saying go to a single calendar. You would still use 2 calendars side-by-side, but the calendar would never show Mar-Mar or Dec-Dec. It would always show Mar-Apr or Nov-Dec or May-June.

Does that track?
http://taylorbrooks.org/ Taylor Brooks

That’s not what I’m suggesting.

Did you delete the thread history?
turvak

Great function – I have multiple fields on a page that require the exact same date range (with options) – you currently call the function for a single id $(‘#reportrange’).daterangepicker(…

How can I apply the same function to multiple ids?
Pingback: All about Twitter Bootstrap | Jayesh Chandrapal
Pingback: Dan Grossman: выбора диапазона дат для Bootstrap Twitter | my personal Blog
Sushil

Hi Dan ..is it possibe to open it at the top instead of left or right
also how to disable future dates selection ..means don’t allow to select date greater than current date

Thanks in advance
http://twitter.com/feel_good_inc Feel Good Inc.

Is there a way to reinitalize the calendar? For example if the user changes the localisation?
http://www.improvely.com/ Dan Grossman

No. I suppose you’d have to either modify the code to allow that, or attach a new DRP to a new element.
Bob

Any thought of added a time range to this?
Pingback: Get More web design with Bootstrap. Tools & Tuts Anton Art Network, Jamaica Website Design & Hosting Services, Graphic design and Marketing
Adis Osmonov

Hi, Dan. It’s really cool plugin. Thx very much.

BTW, how to make so that the user can’t manually change the value of input field? I tried ‘disabled’ attribute, but it makes input not clickable. Pls help.
p.s. sorry for bad english.
http://www.improvely.com/ Dan Grossman

Consider not using an input element. Style a div, as you see in the second example above.
Adis Osmonov

Thank you very much, I didn’t pay attention.
http://www.facebook.com/deepak.sakpal.71 Deepak Sakpal

It displayed in background while used in Modal. You can have a look at http://jsbin.com/omawep/1. How to fix this problem?
Pingback: Useful JavaScript Libraries and jQuery Plugins For Web Developers
Pingback: 扩展Twitter Bootstrap的JavaScript插件 | Chaoyue's Blog
http://twitter.com/lokarlhorst lokarlhorst

same problem here Need a solution to fix it.
http://twitter.com/lokarlhorst lokarlhorst

Fixed it with this snippet:

.daterangepicker{z-index:1151;}

The z-index of the daterangepicker higher than the z-index of modal is the solution.
http://www.ivanlewis.in/ Ivan Lewis

Superb!
Arman

This is awesome! However, it would be nice, if the user could pick two dates within the same calendar box. May be even support click’n'drag?
http://www.improvely.com/ Dan Grossman

There are (literally) hundreds of extra things this *could* do that it doesn’t (and dozens of options that do exist and aren’t listed in this blog post), but I have limited time to work on all my open source projects in addition to running a business. Sorry!
Mark S

Nice! Is there a way to make sure the ‘custom range’ datepickers on the second demo are always shown?
http://twitter.com/bradryanbice Brad Ryan Bice

Is it possible to limit the range to a number of days? Say, a max of 7 days? Thanks!
http://twitter.com/bradryanbice Brad Ryan Bice

Nevermind, i found my answer on the Github page (yes!). Thank you!

August 20, 2012

A date range picker for Twitter Bootstrap

Simple Example

Pre-defined Ranges & Callback Example