Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

Posted by Scott on 01/05/2009

We’ve updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a previous version we wrote for jQuery UI 1.5.3.

Working Demo:

Demo Page

The demo above was generated with the following code:


<input type="text" />



An additional demo with arrows and a custom dateFormat:

Demo Page

Features and Updates

  • Uses jQuery UI 1.7.1: The range picker now uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.
  • Date JSDate.js Integration: We’ve integrated the fantastic date.js library to allow for easy preset development.
  • Optional Range Advancing Arrows: Optional forward and back arrows allow a user to jump forward and backward by range duration.
  • ThemeRoller-ReadyjQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.

Download (and help us improve) the code

The date range picker plugin code is open source and available in a git repository, jQuery-UI-Date-Range-Picker. If you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.

Developer Options

The following options are available in this plugin:

  • presetRanges: Array of objects to be made into menu range presets. Each object requires 3 properties:

    • text: string, text for menu item
    • dateStart: date.js string, or function which returns a date object, start of date range
    • dateEnd: date.js string, or function which returns a date object, end of date range
  • presets: Object, datepicker toggle links. Available options are: ‘specificDate’, ‘allDatesBefore’, ‘allDatesAfter’, ‘dateRange’. Each can be passed a string for link and label text. (example: presets: {specificDate: ‘Pick a date’} ).

  • rangeStartTitle: string, text for label above start calendar in a range.

  • rangeEndTitle: string, text for label above end calendar in a range.

  • doneButtonText: string, text for the done/close button.

  • prevLinkText: string, text for the previous arrow (used in title attr of links as well).

  • nextLinkText: string, text for the next arrow (used in title attr of links as well).

  • earliestDate: Date.js string, earliest date allowed in system

  • latestDate: Date.js string, latest date allowed in system

  • rangeSplitter: String, character between two dates in a range.

  • dateFormat String, date formatting, see available values

  • closeOnSelect: Boolean, true will close the rangepicker when a full range is selected.

  • arrows: Boolean, true will add date range advancing arrows to input.

  • posX: int or string, left absolute position of rangepicker. Defaults to bottom left of input.

  • posY: int or string, top absolute position of rangepicker. Defaults to bottom left of input.

  • appendTo: jQuery selector or element, element to append range picker to.

  • onOpen: function, callback that executes the moment the range picker starts to open.

  • onClose: function, callback that executes when the datepicker closes.

  • onChange: function, callback that executes whenever the date input changes (can happen twice on range selections).

  • datepickerOptions: Object, accepts all jQuery UI Datepicker options. See UI datepicker options.

Development Notes

This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. We’ve tested it in Firefox 2/3, Safari 3, and IE6/7.


This plugin requires jQuery and jQuery UI Datepicker. It also uses the jQuery UI CSS Framework as well as one additional custom CSS file. The demo in the zip file includes all necessary dependencies.

Setting Menu Presets

Setting preset ranges is now very easy and powerful with the help of date.js. To add a preset, simply pass an array to the presetRanges option like this:

$('input').daterangepicker( {
  presetRanges: [
    {text: 'My Range', dateStart: '03/07/08', dateEnd: 'Today' }
 } );

Note that the dateStart and dateEnd properties can accept strings (as shown), or functions which return a date object. The string will be parsed by date.js to generate a date (visit Date.js for a list of values). For more custom dates, you can write a function that returns a date object. Keep in mind that you can use Date.js within that function for any helpers you might need.

About Date.js

Date.js is an open source date parsing library written by Coolite. Essentially, you can pass some text into it and get a date in return. For example, it would parse the words “next week” and return a date object for a day 7 days from today - VERY slick! The library does a heck of a lot more than that too, and we strongly advise checking it out at to find out more.

Multiple Inputs

If you’d like to use this plugin with 2 inputs for the start and end dates, simply call the plugin on two inputs instead of one. The plugin will update them in order of appearance.

Demo page using 2 inputs

Driven by Input Value

The datepickers will be generated based on any values that are in the inputs at page load. For single inputs, it will split the input value by the rangeSplitter character (default: ‘-’). Each value is parsed by date.js, so you could even begin with a range like “today - next week” in the input, and the datepickers will be set accordingly.

Still to do…

  • Collision detection: At the moment, the rangepicker simply gets placed on the page by coordinates. There’s no collision detection yet.
  • Instance management: Currently, 2 rangepickers on one page won’t play well together. We’ll look to improve this soon.


<div id="commentNumber1" class="commentEntry">
<p>the “previous” button is broken ie. it appears to do the same thing as “next”

    <p class="posted"><a href="#commentNumber1">Comment</a> by

Luka Kladaric on 01/05  at  06:54 PM

<div id="commentNumber2" class="commentEntry fg">
<p>@Luka: Good Catch, thanks! Fixed.

    <p class="posted"><a href="#commentNumber2">Comment</a> by

Scott (Filament) on 01/05  at  07:08 PM

<div id="commentNumber3" class="commentEntry">
<p>Really nice! It works great in FF3 but in Chrome and IE7 the animation to show the calendar looks weird.

    <p class="posted"><a href="#commentNumber3">Comment</a> by

Ignacio Vivona on 01/05  at  07:35 PM

<div id="commentNumber4" class="commentEntry">
<p>no prob, glad to help… confirming the problem appears to be fixed now

oh yeah, forgot to say amazing job with this new version, looks very smooth… using chrome and seeing no issues with the “animation to show the calendar”

great stuff, keep up the good work!

    <p class="posted"><a href="#commentNumber4">Comment</a> by

Luka Kladaric on 01/05  at  09:41 PM

<div id="commentNumber5" class="commentEntry">
<p>Very impressive stuff! Very smooth transitions and fine touches. Any chance in adding time choosing as well?

    <p class="posted"><a href="#commentNumber5">Comment</a> by

Adam Fortuna on 01/06  at  08:00 AM

<div id="commentNumber6" class="commentEntry">
<p>Doesn’t work in Opera, which renders this useless.

    <p class="posted"><a href="#commentNumber6">Comment</a> by

Dude on 01/06  at  10:07 AM

<div id="commentNumber7" class="commentEntry">
<p>Impressive indeed! I’ll have to look more into this themeroller stuff, but this looks really good.

    <p class="posted"><a href="#commentNumber7">Comment</a> by

Atilla on 01/06  at  10:10 AM

<div id="commentNumber8" class="commentEntry">
<p>Sigh, the problem was that it was using iframe. When do people learn that everyone doesn’t have iframe enabled?

    <p class="posted"><a href="#commentNumber8">Comment</a> by

Dude on 01/06  at  10:10 AM

<div id="commentNumber9" class="commentEntry fg">
<p>@Dude: With iframe disabled, do you still get a link to view the demo in a new window? This was our intention…

    <p class="posted"><a href="#commentNumber9">Comment</a> by

Scott (Filament) on 01/06  at  10:14 AM

<div id="commentNumber10" class="commentEntry">
<p>On FF3 on Ubuntu, your IFRAMEs are stretching across the right column sidebar of this blog. There’s some sort of pixel width problem going on.

    <p class="posted"><a href="#commentNumber10">Comment</a> by

Volomike on 01/06  at  10:23 AM

<div id="commentNumber11" class="commentEntry fg">
<p>@Adam We’ve had a bunch of discussions about time pickers on the jQuery UI wiki and boards because this is a useful widget. My opinion is that a time picker should probably be a separate plugin from datepicker but designed so they could be used together nicely. There is a bit of work already done on using a spinner control to make a timepicker like you’d see in a desktop OS on the UI wiki: <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber11">Comment</a> by

Todd (Filament) on 01/06  at  10:27 AM

<div id="commentNumber12" class="commentEntry fg">
<p>@Volomike We had to make the iframe really wide on these demos to fit the full date range picker in without introducing horizontal scrolling. It’s a bit of a hack, but a makes viewing the demos inline possible.

    <p class="posted"><a href="#commentNumber12">Comment</a> by

Todd (Filament) on 01/06  at  10:35 AM

<div id="commentNumber13" class="commentEntry fg">
<p>@Volomike: Thanks. We’re figuring out a better way to solve that one, but basically we’re resizing the iframe to make room for the component (since it’s too big for the column and can’t pop out of the iframe container). We’ll probably add a close button on the iframe or make it resize back down when the the component is hidden. Sorry for the distraction. Standby… :)

    <p class="posted"><a href="#commentNumber13">Comment</a> by

Scott (Filament) on 01/06  at  10:41 AM

<div id="commentNumber14" class="commentEntry fg">
<p>@Volomike: They should be in good shape now. The iframes are transparent and hopefully unnoticeable.

In order to fix this issue, we decided to introduce 2 new useful options to the plugin: onOpen and onClose.
Both options accept callback functions that will execute when the daterangepicker plugin opens or closes. I’ll document them in the article as well.

Viewing this update will require a good cache refresh for returning users, just FYI. And if you continue to have trouble viewing the demos, you can always click the link under them to view them in a new window.

    <p class="posted"><a href="#commentNumber14">Comment</a> by

Scott (Filament) on 01/06  at  12:42 PM

<div id="commentNumber15" class="commentEntry">
<p>Very nice! Looks like it needs wrapping in an anonymous function in a few places to play nice with other frameworks. I just did a quick-and-dirty find and replace of $( with jQuery( and it fixed the collisions I had with Prototype.

Nice work guys!

    <p class="posted"><a href="#commentNumber15">Comment</a> by

Wynn Netherland on 01/06  at  03:48 PM

<div id="commentNumber16" class="commentEntry">

- Click off the control closes the popdown menu.
- Ensure our disabled friends can access all the functions without a mouse, if you can.
- Disable the “Next” and “Back” buttons on the control (where applicable) when it still says “Choose a Date”.
- Keep making it easy, such as applying a bunch of extremely common defaults if certain properties are not completed.
- If focus is on yet another date control, deselect the previous one.

BTW, I appear late to the game here. I had never heard of Theme Roller, but have been doing jQuery stuff for awhile now—just not going back to the site that much.

    <p class="posted"><a href="#commentNumber16">Comment</a> by

Volomike on 01/06  at  03:55 PM

<div id="commentNumber17" class="commentEntry fg">
<p>@Wynn: good catch, thanks. We had a couple stray $ signs in there. All of them are converted to “jQuery” now so it should be library-safe.

    <p class="posted"><a href="#commentNumber17">Comment</a> by

Scott (Filament) on 01/06  at  04:58 PM

<div id="commentNumber18" class="commentEntry fg">

- Click off the control closes the popdown menu.
FG: View the demos outside of the iframe, this should be true.

- Ensure our disabled friends can access all the functions without a mouse, if you can.
FG: Good point. That might need to wait for jQuery UI’s datepicker’s upcoming refactor.

- Disable the “Next” and “Back” buttons on the control (where applicable) when it still says “Choose a Date”.
FG: Ahh good idea. We’ll add the jQuery UI CSS Framework’s “ui-state-disabled” class to them whenever a range is not selected. This will make them appear disabled through an opacity shift.

- Keep making it easy, such as applying a bunch of extremely common defaults if certain properties are not completed.
FG: Not sure what you mean by this.

- If focus is on yet another date control, deselect the previous one.
FG: Good idea, though we still need to resolve an issue with multiple rangepicker instances anyway. This component will be refactored and ported to an upcoming version of jQuery UI and proper support for multiple instances may need to wait until that time.

    <p class="posted"><a href="#commentNumber18">Comment</a> by

Scott (Filament) on 01/06  at  05:14 PM

<div id="commentNumber19" class="commentEntry">
<p>Hi the Script very good and useful. But the year selection point of i would like to suggest. When on mouseover on year button there should a drop down on top - and bottom + . When on - the years are decrement by 5 years scrolling Similarly mouse on + years automatically incrementing 5 years until user selects.

You can see the idea

    <p class="posted"><a href="#commentNumber19">Comment</a> by

seshu on 01/07  at  02:43 AM

<div id="commentNumber20" class="commentEntry">
<p>Great looking picker. I’m having trouble getting it to work though. First it seems to collide with scriptaculous. Does anyone have a solution to that problem? Second, having it inside a page with other information, the dropdown appears in the end of the page. Is there an example to fix this that I’ve missed?

    <p class="posted"><a href="#commentNumber20">Comment</a> by

Teo on 01/07  at  12:14 PM

<div id="commentNumber21" class="commentEntry">
<p>Hi, how i can do that when i do click in ‘chose a date’ and show the menu show too the Date Range.


    <p class="posted"><a href="#commentNumber21">Comment</a> by

David Rodriguez on 01/08  at  09:50 AM

<div id="commentNumber22" class="commentEntry fg">
<p>@Teo: I’m not sure about the scriptaculous conflict but we’ve removed all $ variable usage in the latest download so make sure you have that version. Let us know if you figure that out.

@David: I don’t understand your question. Can you clarify?

    <p class="posted"><a href="#commentNumber22">Comment</a> by

Scott (Filament) on 01/08  at  10:11 AM

<div id="commentNumber23" class="commentEntry">
<p>when the menu is show to select a date i want that the menu show me by default the ‘Date Range’ Without making  click on the option ‘Date Range’ Excuse my english thanks

    <p class="posted"><a href="#commentNumber23">Comment</a> by

David Rodriguez on 01/08  at  03:11 PM

<div id="commentNumber24" class="commentEntry">
<p>Hi can somebody help me wtih the question that is up??? Thanks

    <p class="posted"><a href="#commentNumber24">Comment</a> by

David Rodriguez on 01/09  at  03:23 PM

<div id="commentNumber25" class="commentEntry fg">
<p>@David:&nbsp; one possible solution is to use the ‘onOpen’ option to trigger a click, something like:

onOpen: function(){
$(’.ui-daterangepicker:visible .ui-daterangepicker-DateRange’).trigger(’click’);

Granted, this is a little hacky—the trigger is scoped very loosely, so it would only work when you have a single date range picker on the page.  But hopefully this will get you started.

    <p class="posted"><a href="#commentNumber25">Comment</a> by

Maggie (Filament) on 01/09  at  04:11 PM

<div id="commentNumber26" class="commentEntry">
<p>Hey Maggie thanks this work very good

    <p class="posted"><a href="#commentNumber26">Comment</a> by

David Rodriguez on 01/09  at  11:24 PM

<div id="commentNumber27" class="commentEntry">
<p>In Opera this webpage looks like this: <a href="" rel="nofollow"></a> !

    <p class="posted"><a href="#commentNumber27">Comment</a> by

carlos on 01/13  at  04:07 AM

<div id="commentNumber28" class="commentEntry">
<p>I found there are an issue to callback “onClose” . see the code daterangepicker.jQuery.js at line 301

jQuery(document).click(function(){hideRP(); });

I think it should be modifed like this:

if (’:visible’)) {

otherwise , when click document anywhere , ererytime it will call the onClose function

    <p class="posted"><a href="#commentNumber28">Comment</a> by

bear on 01/14  at  11:42 AM

<div id="commentNumber29" class="commentEntry fg">
<p>@bear: Thanks for letting us know. The script and zip are now updated with this change.

    <p class="posted"><a href="#commentNumber29">Comment</a> by

Scott (Filament) on 01/14  at  06:00 PM

<div id="commentNumber30" class="commentEntry">
<p>The daterange picker seems to always show up after the closing tag of the form… how can this be altered?

    <p class="posted"><a href="#commentNumber30">Comment</a> by

firefly on 01/15  at  12:12 PM

<div id="commentNumber31" class="commentEntry fg">
<p>@firefly:&nbsp; You can use the appendTo, posX, and posY options to configure that to your needs.

    <p class="posted"><a href="#commentNumber31">Comment</a> by

Scott (Filament) on 01/15  at  02:46 PM

<div id="commentNumber32" class="commentEntry">
<p>i have a input field with text where i want to take the value from date picker and i have a submit button to submit the date to next page.It is displaying the datepicker when i click in the text area and also it is showing the datepicke when you click the submit button and the value of submit button is changed from submit to value from datepicke.Can you please tell me how to submit the date picker value to the next page?

<form action="xxx.php" method=post>
<input type="text" value="Click to pick a date” id="rangeA"/>
<inpur type="submit" value="submit">


    <p class="posted"><a href="#commentNumber32">Comment</a> by

Justin on 01/15  at  04:17 PM

<div id="commentNumber33" class="commentEntry fg">
<p>@Justin: You should probably check your selector to make sure it’s scoped to just the first input in that code sample.


If you have it scoped to all input elements, it’s very likely to cause problems in a real form.

    <p class="posted"><a href="#commentNumber33">Comment</a> by

Scott (Filament) on 01/15  at  04:32 PM

<div id="commentNumber34" class="commentEntry">
<p>With FF3, opening the date picker for “between dates”, then clicking “change theme” with the calendars still visible causes something to break and the container to shrink and gain a scrollbar…


    <p class="posted"><a href="#commentNumber34">Comment</a> by

Tim Yates on 01/16  at  05:58 PM

<div id="commentNumber35" class="commentEntry">
<p>This is awesome! Great in FF3!

But in IE8 with even compatibility mode gives bugs…

Btw really awesome contribution wow!

    <p class="posted"><a href="#commentNumber35">Comment</a> by

James on 01/16  at  10:03 PM

<div id="commentNumber36" class="commentEntry">
<p>Nice work!&nbsp; This is amazing code.&nbsp; My only comment is that the date range picker allows one to pick a date range with an earlier date as the second date ... for example, it allows selecting a range of Jan 15, 2009 - Jan 1, 2009.&nbsp; It would be cool if it did not allow that and perhaps even shaded out dates earlier than the first selected-date.

Kepe it up!

    <p class="posted"><a href="#commentNumber36">Comment</a> by

Brad Fimore on 01/16  at  10:19 PM

<div id="commentNumber37" class="commentEntry">
<p>It would be very great if Date Range support Multilang or Translation because actualy to change presets, we must specify the same id or class to navigate in sub menu.

Very good if the next version support :
- French translation or Change Days / Months in other language
- change method presets to support accents as : Précédent (in english : Previous)

    <p class="posted"><a href="#commentNumber37">Comment</a> by

Lesein Jean-Paul on 01/18  at  05:40 PM

<div id="commentNumber38" class="commentEntry">
<p>There are problems with month To date &amp; Years to date on the Demo. It’s not the good date

    <p class="posted"><a href="#commentNumber38">Comment</a> by

Lesein Jean-Paul on 01/18  at  07:39 PM

<div id="commentNumber39" class="commentEntry fg">
<p>@TimYates: Thanks, we’ll check that out. It’s only an issue with our demo pages though, not the plugin itself.

@James: Interesting. We will test.

@Brad Fimore: Good point. We’ll think of a good way to deal with that but it may need to wait until this component is refactored and included in jQuery UI (projected for jQuery UI 1.7). At that point, we also aim to include range highlighting across calendars and other features such as instance management. Feel free to check out the planning wiki and join in the conversation.

@Lesein Jean-Paul: We’ve added options for each menu preset to have custom text as you’ve requested, as well as new options for nextLinkText, prevLinkText, and doneButtonText. Using these in combination with whatever language settings you’d like to pass into the datepickeroptions hash, you should be able to achieve a full translation. See the options listed above and let us know how this works out for you.
As for the two problems you mentioned, what values are you seeing? I see “1/1/2009 - 1/19/2009” for both, which is correct. These are based on your computer’s date settings, so check to make sure those are correct as well.

    <p class="posted"><a href="#commentNumber39">Comment</a> by

Scott (Filament) on 01/19  at  12:30 PM

<div id="commentNumber40" class="commentEntry">

I want to create multiple input textareas for from: and to: dates and i have a submit button to submit the 2 dates to next page in php.if i use the range1 and range2 with put a submit its perfectly splitting the values in the text area,but if i use the submit button its not working properly...can you please tell us how to use 2 text areas with from and to with a submit button?..thank you

    <p class="posted"><a href="#commentNumber40">Comment</a> by

justin on 01/20  at  04:32 PM

<div id="commentNumber41" class="commentEntry fg">
<p>@justin: what does your selector look like? Make sure you aren’t talking to all inputs in your form, just the two text inputs.

    <p class="posted"><a href="#commentNumber41">Comment</a> by

Scott (Filament) on 01/20  at  04:36 PM

<div id="commentNumber42" class="commentEntry">
<p>Will the following code restrict the picker to 2 text areas?

$(’#range1’).daterangepicker({arrows: true,posX:450,posY:210});
$(’#range2’).daterangepicker({arrows: true,posX:450,posY:210});
range1 and range2 are my 2 text areas in which i want to split the from and to dates…

    <p class="posted"><a href="#commentNumber42">Comment</a> by

justin on 01/20  at  04:49 PM

<div id="commentNumber43" class="commentEntry fg">
<p>@justin: combine those selectors into one and you should be okay.

$(’#range1, #range2’)

    <p class="posted"><a href="#commentNumber43">Comment</a> by

Scott (Filament) on 01/20  at  05:26 PM

<div id="commentNumber44" class="commentEntry">
<p>I can select Jul 31, 2009 to Jun 1, 2009

So I can have the start date > stop date.
I think this is happening on date range

    <p class="posted"><a href="#commentNumber44">Comment</a> by

Gafitescu Daniel on 01/21  at  03:51 AM

<div id="commentNumber45" class="commentEntry">
<p>Hi !

I love your script !

I’m tring to combine an input which display the DateRangePicker script and another one in which the result of the script will be paste. The problem i’m not very familiar with the Jquery framework.

So i tried something like that :

$("#date_range").click(function(){ $("#rangeA").daterangepicker();});

<input type="text" id="rangeA" />
<input type="button" name="date_button" id="date_button" />

but of course it doesn’t work ^_^

If someone may have an idea, will be cool !

And good work again !

    <p class="posted"><a href="#commentNumber45">Comment</a> by

Peepingtom on 01/21  at  11:48 AM

<div id="commentNumber46" class="commentEntry">

I see that your example below uses jquery 1.2.6 with jQuery UI 1.6rc5 and imagine the themes are also for the jQuery UI 1.6rc5 version. Have you been able to run the calendar with jQuery 1.3?

    <p class="posted"><a href="#commentNumber46">Comment</a> by

NTulip on 01/21  at  04:43 PM

<div id="commentNumber47" class="commentEntry">
<p>forgot the link to the example: <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber47">Comment</a> by

NTulip on 01/21  at  04:44 PM

<div id="commentNumber48" class="commentEntry">
<p>Very Nice control.

I can change preset ranges and I can translate all the texts, except Presets.
How can I change Presets Text (Specific Date, All Dates Before, All Dates After, Date Range)?


    <p class="posted"><a href="#commentNumber48">Comment</a> by

quim on 01/24  at  03:48 PM

<div id="commentNumber49" class="commentEntry">
<p>It would be great if the range selector would apply a “select” class on all of the days that are in the range. Not only on the first, and the last one.

Some Google Analytic style selectors for the week, and the month would be nice as well.

    <p class="posted"><a href="#commentNumber49">Comment</a> by

Goran Juric on 01/25  at  08:48 PM

<div id="commentNumber50" class="commentEntry">
<p>I don’t know jQuery, but there is my script for multiple rangepicker instances:

$(’.datapicker’).bind(’focus’,function (){
$(’.datapicker’).daterangepicker({appendTo: ‘#append_here’});

$(’.datapicker2’).bind(’focus’,function (){
$(’.datapicker2’).daterangepicker({appendTo: ‘#append_here2’});

    <p class="posted"><a href="#commentNumber50">Comment</a> by

baael on 01/28  at  02:17 AM

<div id="commentNumber51" class="commentEntry">
<p>How can I change Presets Text (Specific Date, All Dates Before, All Dates After, Date Range)?

    <p class="posted"><a href="#commentNumber51">Comment</a> by

quim on 02/01  at  02:09 PM

<div id="commentNumber52" class="commentEntry">
<p>I’d love to see another preset added for “None” to just clear out the text field on places where you want it to be optional without allowing the user to type in the field.

    <p class="posted"><a href="#commentNumber52">Comment</a> by

Chris Barr on 02/04  at  06:46 PM

<div id="commentNumber53" class="commentEntry">
<p>I’m also keen to know whether this works with JQuery 1.3 (not for me on FF3), and crucially for my selfish interest whether it might work any time soon ...

    <p class="posted"><a href="#commentNumber53">Comment</a> by

chris catton on 02/05  at  07:56 AM

<div id="commentNumber54" class="commentEntry">
<p>ok, it does work with 1.3 - at least somewhat.&nbsp; But if I modify your sample page to

$(’input’).daterangepicker({presetRanges: [], presets: ["specificDate", “dateRange"]});
I get a limited choice of presets (which is what I want) but when I select one I get
jQuery(this).data("dateStart") is not a function
[Break on this error] var dateStart = (typeof jQuery(this)...t’)) : jQuery(this).data(’dateStart’)();
in firebug

    <p class="posted"><a href="#commentNumber54">Comment</a> by

chris catton on 02/05  at  09:12 AM

<div id="commentNumber55" class="commentEntry">
<p>hey there, first of all thanks alot for the great plugin. im planning to implement it in a webpage which will go live in march and i was just looking for a date picker like this one. so i hope i find a solution for my problem:

how am i supposed to enter a start and end date for the init? it seems, that i am able to use the beforeShow function of the original datepickerOptions tho, if i use that function it wont be highlighted from the start.

if anyone could assist i woudl be very thankful. pls contact me on skype @frank_talk

    <p class="posted"><a href="#commentNumber55">Comment</a> by

frank on 02/05  at  10:44 AM

<div id="commentNumber56" class="commentEntry fg">
<p>@Gafitescu: This issue has been addressed in earlier comments. It will probably have to wait until this component is rolled into a future release of jQuery UI’s date range picker plugin.

    <p class="posted"><a href="#commentNumber56">Comment</a> by

Scott (Filament) on 02/05  at  11:23 AM

<div id="commentNumber57" class="commentEntry fg">
<p>@ Peepingtom: You’ll only need the portion that is inside the click event. Attaching this plugin to an input will handle the click toggling for you. Be sure to wait until dom ready to call it as well. Like this:


    <p class="posted"><a href="#commentNumber57">Comment</a> by

Scott (Filament) on 02/05  at  11:25 AM

<div id="commentNumber58" class="commentEntry fg">
<p>For those asking about jQuery 1.3 support, we plan to update this plugin to 1.3 once the new UI release is out. We’re a bit busy with that at the moment :) In general, I don’t think there will be compatibility issues in this plugin, but the version of jQuery UI MUST be updated to 1.6 in order to work with jQuery 1.3.

If you’re trying to get this to work with 1.3 asap, try upgrading both jQuery and jQuery UI.

    <p class="posted"><a href="#commentNumber58">Comment</a> by

Scott (Filament) on 02/05  at  11:28 AM

<div id="commentNumber59" class="commentEntry fg">
<p>@ quim: make sure you have the latest copy of the plugin. The text for those options is now overrideable via the “presets” option. Keep in mind that this option will override the entire presets hash, so include all of the presets you want in your menu. For example might want your wording to read more like this…

presets: {
specificDate: ‘Just one date...’,
allDatesBefore: ‘Any date before...’,
allDatesAfter: ‘Any date after...’,
dateRange: ‘Custom range...’

The top portion of the menu is more freeform and is addressed through a different option called presetRanges. View the source of the plugin to see how those are handled. I left a few examples commented out.

    <p class="posted"><a href="#commentNumber59">Comment</a> by

Scott (Filament) on 02/05  at  11:36 AM

<div id="commentNumber60" class="commentEntry fg">
<p>@Goran: yeah this will be included in jQuery UI’s version of this plugin. We’ll apply the jQuery UI CSS Framework class of “ui-state-highlight” most likely.

    <p class="posted"><a href="#commentNumber60">Comment</a> by

Scott (Filament) on 02/05  at  11:37 AM

<div id="commentNumber61" class="commentEntry fg">
<p>@Chris Barr: Can you give a more specific use case? We think it’s pretty easy to clear a text input on your own without adding a clear button. For that reason, the feature was removed in UI’s datepicker 1.6. Thoughts?

    <p class="posted"><a href="#commentNumber61">Comment</a> by

Scott (Filament) on 02/05  at  11:45 AM

<div id="commentNumber62" class="commentEntry fg">
<p>@chris catton: thanks. after the 1.6 release is out, we’ll update this. For now, you might try updating both jQuery and UI to go with this.

    <p class="posted"><a href="#commentNumber62">Comment</a> by

Scott (Filament) on 02/05  at  11:47 AM

<div id="commentNumber63" class="commentEntry fg">
<p>@ frank: please clarify. I don’t quite understand what you’re trying to do. thanks.

    <p class="posted"><a href="#commentNumber63">Comment</a> by

Scott (Filament) on 02/05  at  11:48 AM

<div id="commentNumber64" class="commentEntry">
<p>to my first post i wanted to add some more information:

what i am trying to do atm is using the onOpen function to set the start and end date.


it seems, that the its picking the right month since it jumps to january. but its not getting highlighted. am i missing something with the theme roller css?

    <p class="posted"><a href="#commentNumber64">Comment</a> by

frank on 02/05  at  11:48 AM

<div id="commentNumber65" class="commentEntry">
<p>@Scott - thanks for the response - and good luck with the release - fyi the error above is with jquery 1.3.1 and UI 1.6rc6

    <p class="posted"><a href="#commentNumber65">Comment</a> by

chris catton on 02/05  at  11:50 AM

<div id="commentNumber66" class="commentEntry fg">
<p>Hi all, I’ve updated the demos and zip to include jQuery 1.3.1 and jQuery UI 1.6rc6. There were no detectable differences or bugs in making the update. The good news is, this plugin will still work with UI versions that are based on jQuery 1.2.6 (such as jQuery UI 1.6rc4).

If you are having any issues with jQuery compatibility, just make sure you have the matching versions of jQuery and UI.

    <p class="posted"><a href="#commentNumber66">Comment</a> by

Scott (Filament) on 02/06  at  11:23 AM

<div id="commentNumber67" class="commentEntry fg">
<p>The issues with multiple pickers on a page still exist. We’re open to suggestions from anyone who has time to peer into the source. Seems to be a scope issue, but it’s hard to say…


    <p class="posted"><a href="#commentNumber67">Comment</a> by

Scott (Filament) on 02/06  at  11:35 AM

<div id="commentNumber68" class="commentEntry">
<p>Hi scott

Thanks for doing this so quickly - however I’m afraid it’s not so simple - I’m still seeing the error I reported yesterday when I use

$("input").daterangepicker({presetRanges: [], presets: ["specificDate", “dateRange"]});

Am I right that this is a bug, or am I doing something stupid?

    <p class="posted"><a href="#commentNumber68">Comment</a> by

chris catton on 02/06  at  11:54 AM

<div id="commentNumber69" class="commentEntry fg">
<p>Hey Chris,

It’s just a syntax error, possibly caused by our recent change in the value type of the presets option. In order to accommodate internationalization, the presets option is now a hash. Try this:

$(’input’).daterangepicker({presetRanges: [], presets: {specificDate: “Specific Date”, dateRange: “Date Range"}});

    <p class="posted"><a href="#commentNumber69">Comment</a> by

Scott (Filament) on 02/06  at  12:53 PM

<div id="commentNumber70" class="commentEntry">
<p>Hello Scott,

i hope example helped to clarify the question about the defaultDate. Im not sure if im doing something wrong or if this is a bug:


is not getting me the preselected dates highlighted.

and another question came up, when i moved on. The onClose function seems to be called 2 times.

onClose: function(){

is this intended or am i doing again something wrong?

what it should do:
preselect the dates (highlighted) in both calendars. when the daterangepicker is closed i want to pass the values to another function, tho this function is called 2 times.

thx for any advise

    <p class="posted"><a href="#commentNumber70">Comment</a> by

frank on 02/09  at  04:51 AM

<div id="commentNumber71" class="commentEntry">
<p>How i can change the appendTo property??

The example is

appendTo: ‘body’,

but i need put them in the input.

I write appendTo: $’input’, but not found

    <p class="posted"><a href="#commentNumber71">Comment</a> by

dipone on 02/09  at  11:57 AM

<div id="commentNumber72" class="commentEntry">
<p>Hi All,

This is just a note of thanks for the excellent work. This control sorted most of my problems


    <p class="posted"><a href="#commentNumber72">Comment</a> by

himali (Sri Lanka) on 02/10  at  09:37 AM

<div id="commentNumber73" class="commentEntry">
<p>There seems to be a problem with it integrating into other scripts in IE6. I’m using a number of different JQuery scripts which all work perfectly together until I put in:


The ones i’m using are:

They all work perfectly together when I comment out the daterange stuff, but with it, it all stops working.

It’s perfect in FF, just no IE6.

    <p class="posted"><a href="#commentNumber73">Comment</a> by

Rob on 02/10  at  10:29 AM

<div id="commentNumber74" class="commentEntry">
<p>re:the abbove

this is using the slightly older version of jquery 1.2.6 and ui 1.6rd4, unfortunately I can’t upgrade at the moment due to some of the scripts on use.

    <p class="posted"><a href="#commentNumber74">Comment</a> by

Rob on 02/10  at  10:31 AM

<div id="commentNumber75" class="commentEntry">
<p>Hi This hack dont work anymore with the new version, i need use the new version because i have to chage the present value

in the version that i have i cant chage this ‘presets: [’Date Range’, ‘Specific Date’, ‘All Dates Before’],’

but in the new version yes, i can but the hack don work


@David:  one possible solution is to use the ‘onOpen’ option to trigger a click, something like:

onOpen: function(){
$(’.ui-daterangepicker:visible .ui-daterangepicker-DateRange’).trigger(’click’);

Granted, this is a little hacky—the trigger is scoped very loosely, so it would only work when you have a single date range picker on the page.  But hopefully this will get you started.

    <p class="posted"><a href="#commentNumber75">Comment</a> by

David Rodriguez on 02/12  at  03:41 PM

<div id="commentNumber76" class="commentEntry">
<p>Hi scott,

I spent some time today digging through the daterangepicker code trying to work out why two pickers on the same page won’t play nice.  I didn’t get to the bottom of it, but there seem to be two problems.  The first is fairly trivial - in the jQuery.fn.clickActions function I need to call; to bring up the datepicker for the first input on the page.

The second problem is a bit more subtle.  I think it is that right at the start there is a call to var rangeInput = jQuery(this);
which sets the range into which the datepicker enters the start and end dates.  However, (this) is getting set each time the daterangepicker is loaded, and it’s not scoped to the daterangepicker but to the page and therefore the daterangepicker always uses the last rangeinput on the page.

Anyone has thoughts on the best way to go from here?

    <p class="posted"><a href="#commentNumber76">Comment</a> by

chris catton on 02/12  at  06:45 PM

<div id="commentNumber77" class="commentEntry fg">
<p>Thanks Chris. Thanks for taking a look at the source.

On your two points:
I’m not sure the clickActions function needs to show the picker, since the only time the function is used is when clicking a menu preset, meaning the picker is already visible. Am I missing your point?

In the portion where we set var rangeInput = $(this), ‘$(this)’ refers to the selector that the plugin was called upon, not the page. If I’m misunderstanding what you mean, can you clarify?

Thanks :)

    <p class="posted"><a href="#commentNumber77">Comment</a> by

Scott (Filament) on 02/16  at  02:26 PM

<div id="commentNumber78" class="commentEntry">
<p>Hi scott

So what I was trying to say, in a bit too much of a hurry, is this:
Take this test page


<% form_for(@enquiry) do |f| %>
<%= f.text_field :booking_dates %><br>
<%= f.text_field :event_dates %><br>

<%= f.submit “Create” %>

<% end %>

when I watch what happens to the datepicker with firebug, the variable rangeInput seems to be scoped to the page.  If I put a console.log(this);
immediately after the declaration of the rangeInput variable I get this readout:

Object 0=input#enquiry_booking_dates length=1
Object 0=input#enquiry_event_dates length=1
which is what I expect to see ...

but if I put
immediately after the call to jQuery.fn.clickActions = function(){
and then click each field in turn I get

Object selector=#enquiry_event_dates context=document
Object selector=#enquiry_event_dates context=document

- which is wrong I think - whichever field I click in, the same rangeInput is returned, because although the rangeInput should be tied to the input field, it is not.

(all that said, I’m early on the learning curve with JQuery, and may have this completely wrong ....)

    <p class="posted"><a href="#commentNumber78">Comment</a> by

chris catton on 02/16  at  03:43 PM

<div id="commentNumber79" class="commentEntry">
<p>sorry - for datepicker in the above post, read daterangepicker


    <p class="posted"><a href="#commentNumber79">Comment</a> by

chris catton on 02/16  at  03:44 PM

<div id="commentNumber80" class="commentEntry">
<p>Thanks Scott

Translation is complete now.

    <p class="posted"><a href="#commentNumber80">Comment</a> by

Quim on 02/17  at  09:05 AM

<div id="commentNumber81" class="commentEntry">
<p>Hi all,

Does anyone have any idea why the datepicker is appearing HUGE in my example here:

I’ve got nothing unusual and nothing in the page clashing.

Ideally I’d like it this size:

Thanks in advance for any help!


    <p class="posted"><a href="#commentNumber81">Comment</a> by

Bob on 02/17  at  09:56 AM

<div id="commentNumber82" class="commentEntry fg">
<p>@ chris catton: Thanks! I’ll take a deeper look based on what you’ve sent.

@ Quim: Good to hear. If you have time, it would be helpful to post your daterangepicker options here for others who are trying to translate the presets. Thanks!

@Bob: Yes. It’s because your theme is using EMs for font-size units and it is written assuming 1em=10px. You have a couple options:
A. Set your body element’s font size to 62.5%. This will override your browser’s default font size of 16px and make 1em = 10px.
B. Go to and change your font size to a pixel unit. This will fix the issue too but it will prevent the datepicker from resizing when a user increases their font size in IE.
If your UI can support ems, we’d recommend option A.

In the future, please post UI-related questions in google groups You’ll get help much quicker there.

    <p class="posted"><a href="#commentNumber82">Comment</a> by

Scott (Filament) on 02/17  at  06:31 PM

<div id="commentNumber83" class="commentEntry">

That did it!  Thanks for your help



    <p class="posted"><a href="#commentNumber83">Comment</a> by

Bob on 02/18  at  09:56 AM

<div id="commentNumber84" class="commentEntry">
<p>I cannot get this to function, I could not use the min files in the zip because they did not have the rest of the ui stuff I am using but I have latest versions of the jquery and ui, and your date picker but when I try it exactly like your example I get an error and nothing happens when I click in the choose date box. I know I am putting you on the spot but any idea, I am a jquery newbie.

    <p class="posted"><a href="#commentNumber84">Comment</a> by

regina on 02/18  at  06:36 PM

<div id="commentNumber85" class="commentEntry">
<p>ok got it. and I got more than one instance working on the page as well by giving it a unique class name to call it by.&nbsp; then I just put each of them in their own  $(document).ready(function() {

$(’input.rangeA’).click(function() {
appendTo: ‘#dateDiv’
instead of init.
where rangeA is unique and datediv is unique too that way the popup shows up where it should.

very nice little datepicker, my compliments.

    <p class="posted"><a href="#commentNumber85">Comment</a> by

regina on 02/20  at  03:45 PM

<div id="commentNumber86" class="commentEntry">
<p>Hey thanks for this, I have it installed and had to tweak it a bit. See working example of it running in a big search form I had to change appendTo from default Body to a ID div. works a treat check it out <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber86">Comment</a> by

Holiday Rentals Advanced Search on 02/22  at  05:59 PM

<div id="commentNumber87" class="commentEntry">

i like it!!!
There seems to be a problem with it under “Date Range”, the “Start Date” can be smoller then the “End Date”, how can i fix it?

    <p class="posted"><a href="#commentNumber87">Comment</a> by

asaf on 02/23  at  01:11 PM

<div id="commentNumber88" class="commentEntry">

Isn’t the earliestDate Supposed to set some kind of minimum date that is allowed to be entered?
It is not working for me.
I set the earliestDate: ‘01/02/09’
still i can choose a date from 2008.
can anyone implement a sample on how to make this impossible?

    <p class="posted"><a href="#commentNumber88">Comment</a> by

Souhail Jabbour on 02/25  at  01:22 AM

<div id="commentNumber89" class="commentEntry">
<p>It would really helpful if posX and posY options accepted a function… and/or if options could be updated after initial setup.

The situation I’m fighting is that the picker is on a tabbed page, and if the tab it’s in is display:none at the time I call .daterangepicker(), then my calculated position is wrong.

It seems a semi-workable hack is to make the initial call to set up the picker after a tabsselect event so the field is guaranteed visible. But you have to be sure not call it repeatedly on subsequent tab switches.

    <p class="posted"><a href="#commentNumber89">Comment</a> by

nerkles on 02/27  at  03:01 PM

<div id="commentNumber90" class="commentEntry">
<p>great job on the datepicker!!! love it!

but i think i found a bug:
lines 227 & 228 of daterangepicker.jQuery.js
on both lines the function in the ‘else’ clause part seems to contain extra ()…
at least firebug complained that jQuery(this).data(’dateStart’) and jQuery(this).data(’dateEnd’) “is not a function”. removing the extra set of () solved the problem.
this manifested itself when i defined custom ranges and used Date.js functions (i.e. to specify dates for the dateStart and dateEnd values.

sorry if this has been reported already - i didn;t have time to real all the posted comments…



    <p class="posted"><a href="#commentNumber90">Comment</a> by

Azadi Saryev on 03/06  at  12:23 PM

<div id="commentNumber91" class="commentEntry">
<p>Hey guys,

I’m getting a weird error when using the picker with jquery 1.3.2. This issue only happens on Safari and it breaks within the sizzle engine line 2119 in jquery-1.3.2.js. I believe these changes were made in 1.3.2 to place the order of matching elements to a selector in document order.
Any idea’s?


    <p class="posted"><a href="#commentNumber91">Comment</a> by

redsquare on 03/09  at  09:11 AM

<div id="commentNumber92" class="commentEntry">
<p>test link for above issue <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber92">Comment</a> by

redsquare on 03/09  at  09:18 AM

<div id="commentNumber93" class="commentEntry">
<p>Great control

When using a date range is there a way to get the altField and altFormat to work? Ideally it would allow altFieldA and altFieldB and set the date accordingly.

    <p class="posted"><a href="#commentNumber93">Comment</a> by

Kevin on 03/11  at  01:59 PM

<div id="commentNumber94" class="commentEntry">
<p>Hi excellent plugin but it don’t work if you are using jQuery.noConflict();. I’m using prototype and jquery on my site but can’t load your calendar correctly :(

    <p class="posted"><a href="#commentNumber94">Comment</a> by

Mckensy on 03/13  at  05:55 AM

<div id="commentNumber95" class="commentEntry">
<p>earliestDate and latestDate are not working. any suggestions on this? I hope development is still ongoing. Haven’t seen a dev comment in over a month…

earliestDate: Date.parse(days.first),
latestDate: Date.parse(days.last),
posX: 441,
posY: 346

console: Object first=Wed, 04 Mar 2009 last=Fri, 13 Mar 2009

    <p class="posted"><a href="#commentNumber95">Comment</a> by

riegersn on 03/14  at  11:37 PM

<div id="commentNumber96" class="commentEntry">
<p>Well, after some code browsing i see that earliestDate and latestDate are only used with the presets allDatesBefore and allDatesAfter. This is a definite must have.

    <p class="posted"><a href="#commentNumber96">Comment</a> by

riegersn on 03/14  at  11:58 PM

<div id="commentNumber97" class="commentEntry">
<p>What License is this date-picker?

I checked that datejs is MIT.
Is this MIT?

    <p class="posted"><a href="#commentNumber97">Comment</a> by

barry on 03/16  at  02:15 PM

<div id="commentNumber98" class="commentEntry">
<p>riegersn, you helped me figure out the earliestDate issue by using Date.parse()!

earliestDate: Date.parse(’1/1/2008’)

Works like a champ! Thanks!

    <p class="posted"><a href="#commentNumber98">Comment</a> by

nklineg on 03/19  at  01:34 PM

<div id="commentNumber99" class="commentEntry">
<p>How do you create a datepicker with a select box for day, month and year?

altField: '#day', altFormat: 'dd',
altField: '#month', altFormat: 'mm',
altField: '#year', altFormat: 'yyyy'

This doesn’t work.  How do I do this?

    <p class="posted"><a href="#commentNumber99">Comment</a> by

ad on 03/19  at  02:44 PM

<div id="commentNumber100" class="commentEntry fg">
<p>Everyone: thanks for all of your feedback and ideas. We’re trying to figure out the source of the conflict with jQuery 1.3.2 in Safari. Please let us know if you have any ideas.

@ nerkles: Once this control is rolled into jQuery UI, it will run on the UI widget API which will allow for updating options after init. We probably won’t be able to get to that until then, but we welcome code patches!

@Holiday Rentals Advanced Search: Nice site! Glad to see it in action.

@ Azadi Saryev: Thanks. Updated.

@ redsquare: I’ve got the jQuery team looking at this since it seems to be due to the new selector element ordering in jQuery 1.3.2. We’ve posted a page to illustrate the error as well, here:
Does anyone have any ideas why this error is occurring in Safari?

@kevin: Did you try the datepickerOptions option? You should be able to pass native datepicker options into there.

@ Mckensy: We made sure to use “jQuery” instead of $ to prevent such collisions but it appears the date.js library uses $, which is probably causing your conflict. Maybe you could try replacing their $ variables with something else.

@Souhail Jabbour, @asaf, @riegersn: Did you see @nklineg’s comment? Let me know if that works. Also, maybe passing them into the datepickerOptions option will do what you’re trying to do.

@barry: The license is in the JS file. It’s dual: MIT and GPL.

@ad: If you’re trying to use a native datepicker option, pass it into the datepickerOptions option.

    <p class="posted"><a href="#commentNumber100">Comment</a> by

Scott (Filament) on 03/23  at  02:49 PM

<div id="commentNumber101" class="commentEntry">
<p>The link to an example page to show the use of the plugin with two input fields instead of one does not actually point to such a page, as far as I can tell.&nbsp; It’s just one input field.

    <p class="posted"><a href="#commentNumber101">Comment</a> by

Mike McNally on 03/24  at  03:00 PM

<div id="commentNumber102" class="commentEntry fg">
<p>Thanks Mike. Fixed now.

    <p class="posted"><a href="#commentNumber102">Comment</a> by

Scott (Filament) on 03/24  at  03:12 PM

<div id="commentNumber103" class="commentEntry">
<p>Cool, thanks!&nbsp; Here’s something I’ve noticed - I’ve been working on this with a co-worker, and I was really confused for a while because his preset ranges were working and mine weren’t, even though our initialization code was exactly the same. Well I’ve just discovered that we have different versions of the plugin. In his version, when the date pickers are initialized, the values of “dateStart” and “dateEnd” are assumed to be functions if they’re not strings, and the code calls the functions and passes the results.&nbsp; In my version (which unless I’m hallucinating I downloaded from the link on this page), it doesn’t invoke the functions (and thus the date picker code gets confused).

This is a really cool piece of software and I hope it keeps getting cooler.

    <p class="posted"><a href="#commentNumber103">Comment</a> by

Mike McNally on 03/25  at  11:01 AM

<div id="commentNumber104" class="commentEntry">
<p>Workaround about “dateStart is not a funtion”.

I’ve patched daterangepicker.jQuery.js
Change lines:
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) :
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’);


var dateStart;
switch(typeof jQuery(this).data(’dateStart’)){
case “string”:
dateStart = Date.parse(jQuery(this).data(’dateStart’)) ;
case “function”:
dateStart = jQuery(this).data(’dateStart’)();
dateStart = jQuery(this).data(’dateStart’);
var dateEnd;
switch(typeof jQuery(this).data(’dateEnd’)){
case “string”:
dateEnd = Date.parse(jQuery(this).data(’dateEnd’)) ;
case “function”:
dateEnd = jQuery(this).data(’dateEnd’)();
dateEnd = jQuery(this).data(’dateEnd’);

    <p class="posted"><a href="#commentNumber104">Comment</a> by

Fernando Fernández on 03/26  at  04:09 AM

<div id="commentNumber105" class="commentEntry">
<p>It seems the function form of the custom ranges is not working. However, this is very easily fixed. Lines 227 &amp; 228 of daterangepicker.jQuery.js are missing the actual function calling, ie. [...]  : jQuery(this).data(’dateStart’); should be [...]  : jQuery(this).data(’dateStart’)();

This fixed that functionality for me. Also, for some reason the popup doesn’t move to its correct position in my app by default, but insteads appears as the last element in body. I fixed this by adding some code to move it to the input field’s position when opened, but it’s still strange, as it works perfectly in your demo…

Other than that, great work. :)

    <p class="posted"><a href="#commentNumber105">Comment</a> by

AKX on 03/26  at  09:43 AM

<div id="commentNumber106" class="commentEntry">
<p>I have recently started looking into this plug in. which by the way is everything i’m looking for great job team! my only problem at this point and i’ve kinda done some searching. i would rather onselect="this.form.submit" but i am unsuccessfull at this point and have been forced to add a submit button. my code is as follows if there is anyone who could possibly point out any i just using one page index.php and posting back to the same page with conditional formatting and php. i would be able to post the entire code if needed.

<form action="index.php" method="POST">
<input type="text" id="rangeA" name="date1" class="daterange" value="Begin Date” />
<input type="text" id="rangeB" name="date2" class="daterange" value="End Date” />
<input type="Submit" value="Submit" ></input>

Greatly appreciated.

    <p class="posted"><a href="#commentNumber106">Comment</a> by

Javier on 03/26  at  05:28 PM

<div id="commentNumber107" class="commentEntry">
<p>comments on?

    <p class="posted"><a href="#commentNumber107">Comment</a> by

admin on 03/27  at  09:28 AM

<div id="commentNumber108" class="commentEntry fg">
<p>@ Mike and @AKX: Thanks for the heads up. That was a recently changed in attempt to fix another issue. I’ve reverted it and updated the js and zip so these problems should be gone now.

    <p class="posted"><a href="#commentNumber108">Comment</a> by

Scott (Filament) on 03/27  at  09:38 AM

<div id="commentNumber109" class="commentEntry">
<p>GREAT work here !! but ,, have you any plans for making Localization ?!

    <p class="posted"><a href="#commentNumber109">Comment</a> by

K@R!M on 03/28  at  02:38 PM

<div id="commentNumber110" class="commentEntry">
<p>I’m having a problem using this cool date range picker.&nbsp; The web page i’m currently working on allows the user to select a date range and other inputs in order to generate a Crystal Report or a PDF report (depends on the user’s selection).&nbsp; The problem occurs after the Crystal Report is displayed under the controls.&nbsp; When the user tries to select another date range while the pop up is overlaying the Crystal report, the submenu from the “Date Range” option doesnt get displaying correctly anymore.&nbsp; I dont know what has caused this and only happens in IE. Works fine in FF.&nbsp; May be the layout generated from the Crystal report affects the layout of the calendar control.

Another problem is that the pop up from the date range picker doesn’t get displayed on top of the PDF report, instead it’s shown “underneath” the displaying PDF report on both browsers.

Could someone shed some light on this?  Thanks

    <p class="posted"><a href="#commentNumber110">Comment</a> by

Hokagenz on 03/29  at  09:29 PM

<div id="commentNumber111" class="commentEntry">

Throws an error when I try to select the End Date first in a date range.

Thank you for a nice plugin.

    <p class="posted"><a href="#commentNumber111">Comment</a> by

John Emmanuel on 03/30  at  06:46 AM

<div id="commentNumber112" class="commentEntry">
<p>Error in daterangepicker.js - function fDate(date) the date parameter is null. This happens when i select the end date first..

Please fix it.

Thanks for the good calender plug in :)

    <p class="posted"><a href="#commentNumber112">Comment</a> by

Murali on 03/31  at  07:00 AM

<div id="commentNumber113" class="commentEntry">

If I want to submit as soon as change is made on the RangeA input, is “onClose” only option?  I’ve tried it, but it looks like it is called three times..  I’ve tired “onchange” but it doesn’t work… any ideas?  Thanks.

    <p class="posted"><a href="#commentNumber113">Comment</a> by

Veronica on 03/31  at  08:10 PM

<div id="commentNumber114" class="commentEntry">

It’s a great date picker you have created!

I’m facing an issue when I try to have two datepickers in an input form.

The datepicker seems to work only for one of them. However, if I initialize the datepickers every time someone clicks the input area then it works fine. I do not want to initialize datepicker every time someone clicks it (it’s takes time to initialize it every time)

Is there any wayI can initialize two or more datepicker objects at page load and hav thm working fine?

    <p class="posted"><a href="#commentNumber114">Comment</a> by

Nischal Shetty on 04/01  at  12:15 AM

<div id="commentNumber115" class="commentEntry">
<p>Ok.. in this very page you have 2 separate datepickers… How do I do that??

    <p class="posted"><a href="#commentNumber115">Comment</a> by

Nischal Shetty on 04/01  at  12:36 AM

<div id="commentNumber116" class="commentEntry">
<p>@shetty - they do it by loading the content in an iframe.&nbsp; I really wish there was a better way to put 2 of these on a single page.&nbsp; Any ideas?

    <p class="posted"><a href="#commentNumber116">Comment</a> by

Jeremy on 04/05  at  12:59 AM

<div id="commentNumber117" class="commentEntry">
<p>Well I decided to just sit down for a few minutes and go through the source code to see if I could figure out the instance problem that’s been hounding me and I think I have a solution.&nbsp; I would still consider myself new the jQuery and plugins so you all will have to tell me if this is ok or not, but it seems to work and it may help people come up with a better solution.

It seems like the rp and rpPickers variables are always being set to the last daterangepicker instance that was created.  So the “jQuery.fn.clickActions” function was always using the latest instance.  So what I did is change this line:
jQuery.fn.clickActions = function(){

jQuery.fn.clickActions = function(rp, rpPickers){

and I changed this line:

jQuery(this).addClass(’ui-state-active’).clickActions(rp, rpPickers);

It seems to do the job.  Let me know what you all think.

    <p class="posted"><a href="#commentNumber117">Comment</a> by

Jeremy on 04/05  at  01:49 PM

<div id="commentNumber118" class="commentEntry">
<p>I forgot you also have to pass “doneBtn”.

    <p class="posted"><a href="#commentNumber118">Comment</a> by

Jeremy on 04/05  at  02:00 PM

<div id="commentNumber119" class="commentEntry fg">

Great news! Thanks to @Jeremy, above, the date range picker widget now supports multiple instances on a page. Thanks Jeremy - great job figuring that one out.

I’ll also point out that while making the changes noted by Jeremy, I noticed there are a few points in this script where plugins are being rewritten to the $ variable and could be moved outside of the plugin for a performance gain. We’ll try and make that change soon, but if not, it will certainly be fixed when this plugin is rewritten for inclusion in the UI library. If anyone has time to chip in a revision with this fix, we’d love your help :)

Also, this latest uploaded version includes auto-detection for positioning in relation to the input. The logic for the positioning options looks like this:

posX: rangeInput.offset().left,
posY: rangeInput.offset().top + rangeInput.outerHeight(),

Let us know how this logic works with your code so we know if there are any issues. As always, you can override these options by passing your own values into the options argument.

I’d recommend grabbing the latest copy of this script if you are in need of auto-positioning or multiple range pickers on a page.

Let us know how it’s working for you. Thanks!

    <p class="posted"><a href="#commentNumber119">Comment</a> by

Scott (Filament) on 04/06  at  01:07 PM

<div id="commentNumber120" class="commentEntry">
<p>Great plugin. I would like to make the menu &amp; calendar show instantly, rather than using animation, as it seems sluggish in IE. I’ve tried using the duration setting of datepicker ui, but it doesn’t seem to make a difference, is there a different way to do this?

    <p class="posted"><a href="#commentNumber120">Comment</a> by

Bec on 04/07  at  02:44 AM

<div id="commentNumber121" class="commentEntry fg">
<p>@Bec. Glad you like it. There’s no option for configuring the show/hide animation, but you could easily adjust the source to do what you need.

Replace lines 172-178 with:

function showRP(){;
function hideRP(){
rp.hide(0,function(){ options.onClose(); });

    <p class="posted"><a href="#commentNumber121">Comment</a> by

Scott (Filament) on 04/07  at  09:15 AM

<div id="commentNumber122" class="commentEntry fg">
<p>In case anyone is interested, here’s a comment from the web about setting each text input’s value upon making a selection:

    <p class="posted"><a href="#commentNumber122">Comment</a> by

Scott (Filament) on 04/08  at  11:23 AM

<div id="commentNumber123" class="commentEntry">
<p>Bug or have I done something wrong?

When loading the page I get this error:
“rangeInput.val() is undefined”
on line 106 of daterangepicker.jQuery.js
which is this::

inputDateAtemp = Date.parse( rangeInput.val().split(options.rangeSplitter)[0] );

I put in a console.log(rangeInput.size()) and it said 0.

    <p class="posted"><a href="#commentNumber123">Comment</a> by

Peter Bengtsson on 04/09  at  09:28 AM

<div id="commentNumber124" class="commentEntry">
<p>About my last error, it can be seen in action here:

    <p class="posted"><a href="#commentNumber124">Comment</a> by

Peter Bengtsson on 04/09  at  09:33 AM

<div id="commentNumber125" class="commentEntry fg">
<p>Peter, it looks like your selector is just looking for an ID that your input doesn’t have. I tried $(’input[name=daterange]’).daterangepicker(); and it worked…

    <p class="posted"><a href="#commentNumber125">Comment</a> by

Scott (Filament) on 04/09  at  09:41 AM

<div id="commentNumber126" class="commentEntry">
<p>@Scott, you’re so right! I didn’t go back to the obvious. Thanks.

    <p class="posted"><a href="#commentNumber126">Comment</a> by

Peter Bengtsson on 04/09  at  09:59 AM

<div id="commentNumber127" class="commentEntry">
<p>How do I create a custom preset that selects “the previous month”? I can’t seem to figure out the best way to do it.

Thanks for the great plug in.

    <p class="posted"><a href="#commentNumber127">Comment</a> by

Kris Gosser on 04/09  at  01:32 PM

<div id="commentNumber128" class="commentEntry fg">
<p>@Kris: Good question. Since this plugin implements date.js, it’s quite simple.

Try passing this among your preset ranges:

{text: ‘The previous month’, dateStart: ‘1 month ago’, dateEnd: ‘Today’ }

You can test expressions for other date.js string conversions on their site:

    <p class="posted"><a href="#commentNumber128">Comment</a> by

Scott (Filament) on 04/09  at  01:53 PM

<div id="commentNumber129" class="commentEntry">
<p>Thanks Scott,

I should have been a bit clearer: I don’t really want to get the previous 30 days or so, I want to grab the previous month. Meaning, if it’s today April 9th, I grab March 1st through March 31st, not March 9th through April 9th.

I got what you posted to work before, but I was struggling trying to figure out how to get the later, i.e. “just march”.

    <p class="posted"><a href="#commentNumber129">Comment</a> by

Kris Gosser on 04/09  at  01:59 PM

<div id="commentNumber130" class="commentEntry fg">
<p>ah sorry, okay. So date.js has a couple handy methods for moving to first and last days. There’s probably a more concise way to write it, but this works:

{text: ‘The previous Month’, dateStart: function(){ return Date.parse(’1 month ago’).moveToFirstDayOfMonth(); }, dateEnd: function(){ return Date.parse(’1 month ago’).moveToLastDayOfMonth(); } }

    <p class="posted"><a href="#commentNumber130">Comment</a> by

Scott (Filament) on 04/09  at  02:18 PM

<div id="commentNumber131" class="commentEntry fg">
<p>@Kris: Just to reiterate, we’ve set up the date range presets to accept either a date.js string, or any function that returns a date object. If you use a function you can do whatever complicated date manipulation you need to, including both date.js and native javascript date object methods.

    <p class="posted"><a href="#commentNumber131">Comment</a> by

Scott (Filament) on 04/09  at  02:22 PM

<div id="commentNumber132" class="commentEntry">
<p>Thanks Scott, got it all to work now.

Noted on the passing of functions too.

    <p class="posted"><a href="#commentNumber132">Comment</a> by

Kris Gosser on 04/09  at  02:33 PM

<div id="commentNumber133" class="commentEntry">
<p>Hi everyone,

currently I am developing a Widget for Netvibes platform. At the moment, the widget display a static json list. In the widget preferences there is a option to specify a date range (currently in simple HTML tag input text). When I add daterangepicker plugin, and open the edit preferences menu is displayed (in firebug) the following: error rpPickers.find(”.range-start, .range-end").datepicker is not a function.

I am using the following plugins:

Jquery 1.3.2 (ofc)
Jquery Ui Core
Jquery Ui accordion
Jquery daterangepicker
Jquery tablesort

For testing proposes, I created a simple widget (only with a input text) and imported all the plugins used and it was working fine. I really don’t know what to do. Any help is appreciated

To visit the widget that I am developing, please use this link:

    <p class="posted"><a href="#commentNumber133">Comment</a> by

João Gala on 04/15  at  10:16 AM

<div id="commentNumber134" class="commentEntry fg">
<p>@João: Looks like you just need the UI datepicker plugin. It’s standalone (doesn’t rely on core currently). You can grab it on the UI site.

    <p class="posted"><a href="#commentNumber134">Comment</a> by

Scott (Filament) on 04/15  at  10:34 AM

<div id="commentNumber135" class="commentEntry">
<p>I really love your stuff. ONE thing i found to be ‘not so perfect’ (as the rest of your work). The Date-Range makes it possible to define for e.g.

“24th Dec 2009 to 2nd April 2009”

which shouldnt really be possible.

but, to say that again: impressive what you´re doing. best wishes from little austria.

    <p class="posted"><a href="#commentNumber135">Comment</a> by

Herr Kaiser on 04/15  at  11:46 AM

<div id="commentNumber136" class="commentEntry">
<p>Quote “@João: Looks like you just need the UI datepicker plugin. It’s standalone (doesn’t rely on core currently). You can grab it on the UI site. “

I just created the accordion effect by hand, and currently I don’t need the Jquery UI plugin for my widget. Right now I’m just using Jquery, tablesort and daterangepicker plugin, and is still not working :(

I updated to see the last version

    <p class="posted"><a href="#commentNumber136">Comment</a> by

João Gala on 04/16  at  06:04 AM

<div id="commentNumber137" class="commentEntry">
<p>Has anyone been able to get this daterangepicker to work in a JQuery .dialog box? For some reason this will work but it opens in the left hand side of the browser and it looses touch with the textboxes. When you click on any of the dates nothing happens.

This is working find on the page with out being called from a dialog box.

Has anyone been able to get get this to work inside any of the modal type of Jquery boxes?

    <p class="posted"><a href="#commentNumber137">Comment</a> by

WadeO on 04/16  at  03:54 PM

<div id="commentNumber138" class="commentEntry">
<p>I’m having a few problems getting the datepickers to show the dates that are in the inputs at page load.

First of all, the dates are not marked in the datepickers, and they only show if I go back, or forward, a month and then come back to the month corresponding to the pre-defined date in the input.
Other problem that I’m having is related with the date format. In the daterangepicker js file I’ve defined the date format as dd/mm/yy, and if I have a date like 06/03/2009 in the input at page load, the daterangepicker will assume it as June 3 2009, and it should be March 6 2009. But if the input has 23/03/2009 at page load, it will read the date as March 23 2009, and that is correct, just as I want it.
Shouldn’t it always read the date in the format that I specified on the daterangepicker js file? How can I get this to work?

Thank you for the help and congrats for this tool!

    <p class="posted"><a href="#commentNumber138">Comment</a> by

HT on 04/17  at  09:59 AM

<div id="commentNumber139" class="commentEntry fg">
<p>@Herr: Good point re: first date later than the last. It’s an issue that’s been mentioned many times before too. Once this plugin is rolled into jQuery UI, that issue will surely be fixed. Planning page here: <a href="" rel="nofollow"></a>

@João: I didn’t see any datepickers in your demo page, but like I said, based on your list above, I think you need the “datepicker” plugin from jQuery UI. Our plugin depends on the jQuery UI datepicker. You can download it at or it’s also in the zip linked on this page.

@WadeO: You may need to use the posX and posY options to get it to position where you need it.

@HT: I’m not sure on that one. As far as I know, the logic we included for dateFormat is the same that the datepicker widget itself uses. Can you confirm that this issue is not present in the regular jQuery UI datepicker?

    <p class="posted"><a href="#commentNumber139">Comment</a> by

Scott (Filament) on 04/17  at  03:15 PM

<div id="commentNumber140" class="commentEntry">
<p>Is the onClose event firing 3 times for anyone else?

    <p class="posted"><a href="#commentNumber140">Comment</a> by

Justin on 04/17  at  10:49 PM

<div id="commentNumber141" class="commentEntry">
<p>RE : onClose Firing 3 times.&nbsp; The code below will show an alert “Change” 3 times.&nbsp; Also, the closeOneSelect does not work.

Any help would be greatly appreciated.

closeOnSelect: true,
posX: div_pos.left + 830,
onClose: function(){

    <p class="posted"><a href="#commentNumber141">Comment</a> by

Justin on 04/17  at  10:58 PM

<div id="commentNumber142" class="commentEntry">
<p>It seems like when I run the datepicker on an non-existing element, i see “rangeInput.val() is undefined” error. Since the element i want to put the datepicker on does not exist (yet), i’d rather see that it silently did nothing. (Whats the point of the selector otherwise?)


I’ve put my JavaScript call in a common library above that gets included on all pages of my app (even onese which dont have any date inputs).

Any thoughts? Awesome plugin!!!

    <p class="posted"><a href="#commentNumber142">Comment</a> by

Aditya Sanghi on 04/18  at  05:43 AM

<div id="commentNumber143" class="commentEntry">
<p>Thanks--Great plugin!

I’m also getting the onClose event firing 3 times in succession. The menu also pulses 3 times as it’s firing. Anyone know what’s happening here? Maybe a new bug introduced recently?

    <p class="posted"><a href="#commentNumber143">Comment</a> by

Philip Pond on 04/20  at  07:18 PM

<div id="commentNumber144" class="commentEntry">
<p>I am new to jquery.&nbsp; I have set up my daterangepicker and it works nicely.&nbsp; When the daterangepicker is complete I need the value sent to another function [showHint(date_range);].&nbsp; Usually I use a onkeyup event to call my showHint(); function to use AJAX to gather all the points for the given criteria...but it doesn’t work when the daterangepicker is used.&nbsp; Does anyone have a suggestion?

    <p class="posted"><a href="#commentNumber144">Comment</a> by

Tiffany on 04/22  at  10:18 AM

<div id="commentNumber145" class="commentEntry">
<p>Well, it works but not how I intend...It always reads the data before the daterangepicker is complete...So I need to call the function showHint(); after the daterangepicker has returned a value.&nbsp; But I don’t know how to do this...please help.

    <p class="posted"><a href="#commentNumber145">Comment</a> by

Tiffany on 04/22  at  10:23 AM

<div id="commentNumber146" class="commentEntry">
<p>It’s possible just to show one preset without the menu?

Excellent work though and Thanks in advance !

    <p class="posted"><a href="#commentNumber146">Comment</a> by

Pablitt on 04/22  at  03:54 PM

<div id="commentNumber147" class="commentEntry">
<p>How do I pass the date to a function ie. showHint(&lt;date range goes here&gt;) after the dates have been selected?

I tried:
onClose: showHint("04/05/2009",2)

But the showHint function only executes when I load the page.  I need it to execute when after the user finished selecting dates.

What am I missing?

    <p class="posted"><a href="#commentNumber147">Comment</a> by

Tiffany on 04/24  at  12:40 PM

<div id="commentNumber148" class="commentEntry">
<p>Is it possible to limit the date range to +/- 1 year?

    <p class="posted"><a href="#commentNumber148">Comment</a> by

Tiffany on 04/24  at  03:54 PM

<div id="commentNumber149" class="commentEntry">
<p>Is it possible to set first day of week to Monday?

datepicker default option firstDay not working ;(

    <p class="posted"><a href="#commentNumber149">Comment</a> by

Mastyf on 04/25  at  06:39 PM

<div id="commentNumber150" class="commentEntry">
<p>OnClose fires three times for me as well - and much worse, on the first onClose event only the first date has been changed :-/ This makes ajax dev. with this hard. (I had a hard time figuring out why my form appeared fully updated but the values sent to the server on submit wrong :-P

I guess I’ll have to implement a counter.

    <p class="posted"><a href="#commentNumber150">Comment</a> by

Tor I. Pettersen on 04/26  at  09:43 PM

<div id="commentNumber151" class="commentEntry">
<p>Arrows fire onClose twice, while selecting a range fires it three times,

onClose: function(){
if (submitted == 2) {
$(’#events’).submit() //Or any other function you’d like to shoot off

Seems to work :-P

    <p class="posted"><a href="#commentNumber151">Comment</a> by

Tor I. Pettersen on 04/26  at  09:58 PM

<div id="commentNumber152" class="commentEntry">
<p>Thank you Tor for the code, but it doesn’t work for me...If I take out the if statement then it executes correctly three times (with date range picker).&nbsp; It seems that submitted is never initialized and if I initialize it (or a counter) in the onClose function, then it is reinitialized three times and therefor it is always the same value.

    <p class="posted"><a href="#commentNumber152">Comment</a> by

Tiffany on 04/27  at  10:58 AM

<div id="commentNumber153" class="commentEntry">
<p>So, it works, but since it executes my AJAX scripts 2 to 3 times every time the daterangepicker is called, it slows things down.&nbsp; There has to be a quick fix for this but it would take modifying the main js script to set a element id value to finished/1 if the daterangepicker is truly closing?

    <p class="posted"><a href="#commentNumber153">Comment</a> by

Tiffany on 04/27  at  11:11 AM

<div id="commentNumber154" class="commentEntry">

I set the first day to Monday using

> dateStart: function(){return Date.parse(’today-7’).moveToDayOfWeek(1);}

    <p class="posted"><a href="#commentNumber154">Comment</a> by

Tiffany on 04/27  at  11:51 AM

<div id="commentNumber155" class="commentEntry fg">
<p>@everyone: we’re working on a fix for the event firing bug. We’ll let you know when we’ve updated the script.

    <p class="posted"><a href="#commentNumber155">Comment</a> by

Scott (Filament) on 04/27  at  11:55 AM

<div id="commentNumber156" class="commentEntry">
<p>FYI date.js install is not compatible with Linux or Mac.

    <p class="posted"><a href="#commentNumber156">Comment</a> by

Tiffany on 04/27  at  12:05 PM

<div id="commentNumber157" class="commentEntry fg">
<p>@Tiffany: can you elaborate on the problem you’re seeing? We’ve had no issues with date.js on Mac.

    <p class="posted"><a href="#commentNumber157">Comment</a> by

Scott (Filament) on 04/27  at  12:59 PM

<div id="commentNumber158" class="commentEntry">

Newer Macs may not have a problem?...but I noticed in the file there were ^M at the end of some lines which older mac’s OS choke on (perhaps newer macs process ^M as a carriage return now).  This problem is not uncommon when a windows file is not formatted properly for a Linux/Unix system.

    <p class="posted"><a href="#commentNumber158">Comment</a> by

Tiffany on 04/27  at  02:59 PM

<div id="commentNumber159" class="commentEntry fg">
<p>@Tiffany: thanks. we weren’t aware of this problem with any our files. We’ll look into it - perhaps we could change the line-break settings in our code editor and resave...?If you have advice, let us know.

    <p class="posted"><a href="#commentNumber159">Comment</a> by

Scott (Filament) on 04/27  at  03:55 PM

<div id="commentNumber160" class="commentEntry fg">
<p>Everyone: The date range picker’s onOpen and onClose events should be fixed now so that they only fire once when they’re called.

Grab the latest zip for the updated file.

    <p class="posted"><a href="#commentNumber160">Comment</a> by

Scott (Filament) on 04/27  at  03:57 PM

<div id="commentNumber161" class="commentEntry">
<p>Um. It closes again immidiately after clicking it (On Firefox 3.0.9, seems to work in Chrome)

    <p class="posted"><a href="#commentNumber161">Comment</a> by

Tor I. Pettersen on 04/27  at  04:13 PM

<div id="commentNumber162" class="commentEntry fg">
<p>@Tor I. Pettersen: should be okay now - sorry. Hard refresh and it looks good for us. Let us know!

    <p class="posted"><a href="#commentNumber162">Comment</a> by

Scott (Filament) on 04/27  at  04:59 PM

<div id="commentNumber163" class="commentEntry">
<p>Better :-) But onClose doesn’t fire when navigating with the arrows, though.

Any other event I can use to detect that?

Thanks for a great plugin btw.

    <p class="posted"><a href="#commentNumber163">Comment</a> by

Tor I. Pettersen on 04/27  at  07:01 PM

<div id="commentNumber164" class="commentEntry fg">
<p>@Tor I. Pettersen: Good question. I added a callback function for onChange now that you might be able use. Keep in mind that it may not fit your needs exactly because it will fire on EVERY change that occurs in the input. One-click range shortcuts will actually fire 2 change callbacks because this plugin simply triggers date changes on each datepicker, one at a time. Once this plugin is adopted by jQuery UI, I’m sure we’ll work that part out and have the rangepicker firing events as one widget. For now, you’ll need to set up your page with this issue in mind.

    <p class="posted"><a href="#commentNumber164">Comment</a> by

Scott (Filament) on 04/28  at  11:24 AM

<div id="commentNumber165" class="commentEntry">
<p>Thanks a lot for ur script…

Really its worth reading it......Very nice.....


    <p class="posted"><a href="#commentNumber165">Comment</a> by

RathikaPoobalan on 05/05  at  08:50 AM

<div id="commentNumber166" class="commentEntry">
<p>I just downloaded this today.&nbsp; On lines 109 and 114 you have:

if(inputDateBtemp == null){inputDateBtemp = inputDateBtemp;}

is that code really useful?

    <p class="posted"><a href="#commentNumber166">Comment</a> by

Matt on 05/07  at  02:41 PM

<div id="commentNumber167" class="commentEntry">
<p>Feature to add :

Multi date selection highlights

    <p class="posted"><a href="#commentNumber167">Comment</a> by

shamun toha on 05/10  at  07:09 AM

<div id="commentNumber168" class="commentEntry">
<p>When specifying a custom range i would like to see all the UI interaction to happen on one calendar instead of two.&nbsp; This saves screen real estate.

    <p class="posted"><a href="#commentNumber168">Comment</a> by

Eric on 05/11  at  09:08 AM

<div id="commentNumber169" class="commentEntry fg">
<p>@Matt: Thanks for pointing that out. It’s fixed now. Anyone populating the datepickers with preset input values should grab the updated script.

@shamun toha: Thanks, we agree. That feature will likely be supported once this component is officially integrated into jQuery UI.

@Eric: Depending on the use case, you may be right. This layout works best for ranges that span long amounts of time, such as filtering analytics data, blog entries, etc. For small date ranges, a multi-select within a single datepicker might be more appropriate. We hope to support both of these scenarios when the official jQuery UI daterangepicker is developed so you can use whatever works best for your needs.

    <p class="posted"><a href="#commentNumber169">Comment</a> by

Scott (Filament) on 05/12  at  04:01 PM

<div id="commentNumber170" class="commentEntry">
<p>I have a problem with binding daterangepicker to hidden input (with css display:none). In that case control positioning is wrong. Can you halp me to solve this problem.

Its a good idea to implement dispose method.

    <p class="posted"><a href="#commentNumber170">Comment</a> by

hazarin on 05/14  at  03:45 AM

<div id="commentNumber171" class="commentEntry">
<p>I temporaly fix this with this code:

function showRP(){
if(’state’) == ‘closed’){
var promX = rangeInput.offset().left;
var promY = rangeInput.offset().top + rangeInput.outerHeight();"posX",promX); // x position"posY",promY); // y position
rp.parent().css({left: promX, top: promY});’state’, ‘open’);

Waiting for ui release.

    <p class="posted"><a href="#commentNumber171">Comment</a> by

hazarin on 05/14  at  04:10 AM

<div id="commentNumber172" class="commentEntry">
<p>What about the ability to set just a specific month without a day?

    <p class="posted"><a href="#commentNumber172">Comment</a> by

Steve on 05/14  at  03:28 PM

<div id="commentNumber173" class="commentEntry">
<p>I can’t get the demo to work in IE7. I keep getting the following error:

Line: 126
‘this.text’ is null or not an object

I also can’t get this current page to even load in IE

“Internet Explorer cannot open the Internet site
Operation Aborted.

Any ideas?

    <p class="posted"><a href="#commentNumber173">Comment</a> by

Mike on 05/14  at  10:50 PM

<div id="commentNumber174" class="commentEntry">
<p>Trying to set up quarterly preset ranges and trying to do it dynamically.

I have

{text: ‘Q1 this year’, dateStart: function(){ return Date.parse(’April 1’); }, dateEnd: function(){ return Date.parse(’June 30’); } }

but how do I set this for next year without hardcoding the year in?

{text: ‘Q1 this year’, dateStart: function(){ return Date.parse(’April 1 2010’); }, dateEnd: function(){ return Date.parse(’June 30 2010’); } }


    <p class="posted"><a href="#commentNumber174">Comment</a> by

KAB on 05/15  at  07:15 AM

<div id="commentNumber175" class="commentEntry">
<p>never mind - got the year via javascript


    <p class="posted"><a href="#commentNumber175">Comment</a> by

KAB on 05/15  at  07:58 AM

<div id="commentNumber176" class="commentEntry">
<p>Quarters would also make a great new feature.

    <p class="posted"><a href="#commentNumber176">Comment</a> by

Steve on 05/15  at  11:40 AM

<div id="commentNumber177" class="commentEntry">
<p>I am also getting the IE error Mike mentioned but in IE8 - won’t work and can’t display your web page.

Line: 125
‘this.text’ is null or not an object

It eventually crashed IE8 completely.

    <p class="posted"><a href="#commentNumber177">Comment</a> by

Scott on 05/15  at  02:26 PM

<div id="commentNumber178" class="commentEntry fg">
<p>Sorry everyone. There was a trailing comment in the source that was throwing IE off.

Should be better now. The zip is updated.

    <p class="posted"><a href="#commentNumber178">Comment</a> by

Scott (Filament) on 05/15  at  02:51 PM

<div id="commentNumber179" class="commentEntry">
<p>Whoa! Works great - thank you very much for the ultrafast response. I won’t tell other people that you work that fast though; expectations ya know…

Two suggestions:
1) Separate the blog comments page and demo page - this page is getting *long*

2) Add/extend a versioning system for the file download. I’d like to come back to this page often, re-download and get updates. As it is, I don’t know how to verify that something has changed

Great job on this date picker - really awesome stuff. Thank you for sharing.

    <p class="posted"><a href="#commentNumber179">Comment</a> by

Scott Whigham on 05/15  at  03:13 PM

<div id="commentNumber180" class="commentEntry fg">
<p>@Scott: No problem. Glad you like it!

1) We’ve been considering something like that but for this case, this plugin will move into the jQuery UI project’s SVN shortly.
2) Any time the zip changes here, we add a comment. If you checked the box, you’ll stay up to date.

Thanks again.

    <p class="posted"><a href="#commentNumber180">Comment</a> by

Scott (Filament) on 05/15  at  03:17 PM

<div id="commentNumber181" class="commentEntry">
<p>I got it working in IE by setting the preset Ranges rather than leaving it default.&nbsp;

presetRanges: [{text: ‘Today’, dateStart: ‘Today’, dateEnd: ‘Today’ },
{text: ‘Last 7 days’, dateStart: ‘-7 days’, dateEnd: ‘Today’ },
{text: ‘Month to date’, dateStart: ‘1’, dateEnd: ‘Today’ },
{text: ‘Year to date’, dateStart: ‘jan’, dateEnd: ‘Today’ }]

    <p class="posted"><a href="#commentNumber181">Comment</a> by

Mike on 05/15  at  04:09 PM

<div id="commentNumber182" class="commentEntry fg">
<p>@Mike: That’ll work too, since that’s where the bug was. :) The script is fixed now too though.

    <p class="posted"><a href="#commentNumber182">Comment</a> by

Scott (Filament) on 05/15  at  04:11 PM

<div id="commentNumber183" class="commentEntry">
<p>@Scott “Any time the zip changes here, we add a comment. If you checked the box, you’ll stay up to date. “

Whoa - In the past hour, I’ve gotten five emails just from this page. I’m leaving a comment here so that I can un-check the “Notify me of follow-up comments” section as I don’t see another way. Feel free to delete this comment. Sorry everyone for the emails!

    <p class="posted"><a href="#commentNumber183">Comment</a> by

Scott Whigham on 05/15  at  04:26 PM

<div id="commentNumber184" class="commentEntry">
<p>IE problem fixed.&nbsp; Thanks.&nbsp; Great plugin BTW

    <p class="posted"><a href="#commentNumber184">Comment</a> by

Mike on 05/15  at  09:51 PM

<div id="commentNumber185" class="commentEntry">
<p>Fantastic plugin! looks and works great.&nbsp;

My dilema is, that it’s too great :) i simply would like to use it for a date range picker with none of the other “short cuts”.  Any way to do that?

Thanks in advance!

    <p class="posted"><a href="#commentNumber185">Comment</a> by

Shadi Almosri on 05/18  at  05:19 PM

<div id="commentNumber186" class="commentEntry">
<p>Few bugs I found after playing with this:

latestDate does not work, example: latestDate : Date.parse(’today’)

datepickerOptions does not work, example: datepickerOptions : { buttonImage : ‘someimage’}

When you browse the first calendar in a range, the second calendar is not updated.

Can create a range that is in reverse order (e.g. 2.1.2009 - 1.1.2009)

    <p class="posted"><a href="#commentNumber186">Comment</a> by

Viðar on 05/20  at  02:44 AM

<div id="commentNumber187" class="commentEntry">
<p>Two enhancement requests - really the same idea to be able to select multiple dates.

1/ You cannot select a date range of 1 day ? You may wish to do this in certain situations.

2/ It would be useful to be able to select ‘multiple date’ ranges.

Or perhaps I mean lots of individual dates. For instance - which day this month have you travelled to work by car ? You really want to click on lots of days and have them toggle on and off.  So the final output to tjhe form is a list / array of actual dates. And selecting date ranges might be useful to achieve this quickly - although from a user interface clicking on individual dates to toggle on and off might be easier - as not clear with date ranges how to unclick dates within the selected range.

    <p class="posted"><a href="#commentNumber187">Comment</a> by

David Herring on 05/20  at  09:02 PM

<div id="commentNumber188" class="commentEntry">
<p>On 1/ above - you can select a date range of one day - still would like the idea of selecting multiple dates - see 2/ above.

BTW - This is brilliant work.

thx dave

    <p class="posted"><a href="#commentNumber188">Comment</a> by

David Herring on 05/20  at  09:07 PM

<div id="commentNumber189" class="commentEntry">
<p>Example with multiple date selects using Jquery.

    <p class="posted"><a href="#commentNumber189">Comment</a> by

David Herring on 05/20  at  09:30 PM

<div id="commentNumber190" class="commentEntry">
<p>It would be nice to incorporate a year dropdown so you can use it for a Date of Birth

    <p class="posted"><a href="#commentNumber190">Comment</a> by

Neil on 05/22  at  12:09 PM

<div id="commentNumber191" class="commentEntry">
<p>This date picker is fantastic, however, is it possible to use it WITHOUT the popup?&nbsp;  I simply want to display the date range inline on the page with the two calendars, one on top of another, for the user to select a start and end date.

Any thoughts?

    <p class="posted"><a href="#commentNumber191">Comment</a> by

Joshua Lippiner on 05/23  at  02:24 PM

<div id="commentNumber192" class="commentEntry">
<p>Hi Scott,

This is really a great work. It was very easy to install and configure. Thank you.
I also want to ask about which web site will be helpful for using that date range with mysql queries? Do guys have any suggestion?

Thank you,

    <p class="posted"><a href="#commentNumber192">Comment</a> by

Kemal on 05/25  at  02:48 AM

<div id="commentNumber193" class="commentEntry">
<p><a href="" rel="nofollow"></a>

The above link shows a jquery datepicker than supports multiple date selection.

It would be good to see the juqery UI datepicker gain this feature.

I’ll sponsor 50 euros towards getting this done - if this helps.


    <p class="posted"><a href="#commentNumber193">Comment</a> by

David Herring on 05/25  at  05:19 AM

<div id="commentNumber194" class="commentEntry">
<p>I’m getting a weird problem on Safari 4, which I noticed is also happening on your site example as well:

How to reproduce:
1) Click on Date Range,select your dates, and click done
2) Click on Input box and you will see the date range boxes are placed below the menu, vertically stacked on top of eachother, rather than aligned right as originally displayed.

Anyone have solution to this?

Thank you.

    <p class="posted"><a href="#commentNumber194">Comment</a> by

Yehuda on 05/25  at  09:20 AM

<div id="commentNumber195" class="commentEntry">
<p>I found a temporary fix for the problem I listed above:

in the ui.daterangepicker.css file, I added a static width (in my case 600px) to the following class:

.ui-daterangepickercontain {
position: absolute;
z-index: 999;

seems to work, but I don’t know if thats the professional solution ...

    <p class="posted"><a href="#commentNumber195">Comment</a> by

Yehuda on 05/25  at  10:00 AM

<div id="commentNumber196" class="commentEntry">
<p>In Google Chrome, I get the error:

Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2 .../js/jquery.1.3.2.min.js (line 19)

I looked at the source code for your demo on

and you are using jquery.1.3.1

Any ideas how to make this work for 1.3.2?

    <p class="posted"><a href="#commentNumber196">Comment</a> by

Yehuda on 05/26  at  04:30 AM

<div id="commentNumber197" class="commentEntry">
<p>How i can display the months and years in a dropdownlist like the additional demo above? wich file do i need to edit or what style must apply ?… great control btw

    <p class="posted"><a href="#commentNumber197">Comment</a> by

alex on 05/27  at  06:54 PM

<div id="commentNumber198" class="commentEntry">
<p>I tried the following but i’m getting an error:

datepickerOptions: $(’#<%= Textbox1.ClientID %>’).datepicker({ changeYear: true });

“Initialize a datepicker with the changeYear option specified
$(’.selector’).datepicker({ changeYear : true });”

What will be the right way to assign a datepickerOption to the control ?

    <p class="posted"><a href="#commentNumber198">Comment</a> by

alex on 05/27  at  07:47 PM

<div id="commentNumber199" class="commentEntry">
<p>The onClose event still doesn’t work properly - it is fired out of sequence. It only gets fired after the selection of the first date. To demonstrate, the code below has the following results:

$(function() {
datepickerOptions: { onSelect: function() { alert(’OnSelect’); } },
onClose: function() { alert(’OnClose’); }



“OnSelect” ==> “OnClose” ==> “OnSelect”

    <p class="posted"><a href="#commentNumber199">Comment</a> by

Tony on 05/28  at  01:15 AM

<div id="commentNumber200" class="commentEntry">
<p>I have the same issue as Yehuda:

Working with jQuery 1.3.2 in google chrome, I get the error:
“Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2,” source: ...FilamentGroup_daterangepicker/js/jquery-1.3.2.min.js (19)
uncaught exception #<a RangeException>

Note: This works fine in Firefox 3

    <p class="posted"><a href="#commentNumber200">Comment</a> by

jordan on 05/29  at  12:06 AM

<div id="commentNumber201" class="commentEntry">
<p>Sorry to be so hasty with the last post! I just upgraded from chrome to  and it works fine.

Thanks for the great plugin :)

    <p class="posted"><a href="#commentNumber201">Comment</a> by

jordan on 05/29  at  12:11 AM

<div id="commentNumber202" class="commentEntry">
<p>never mind, i now got these options working

datepickerOptions:{changeMonth: true, changeYear:true} =)

    <p class="posted"><a href="#commentNumber202">Comment</a> by

alex on 05/29  at  11:37 AM

<div id="commentNumber203" class="commentEntry">
<p>Hi!! I just trying to build new website.

And I searched jQuery friendly scripts.
Your team’s script are wonderful!!
I’ll try to put inn some your script for my new website.
Thank you for share!! (Bye!Bye!)

Nobutaka from Japan

    <p class="posted"><a href="#commentNumber203">Comment</a> by

nobutaka on 05/31  at  10:00 AM

<div id="commentNumber204" class="commentEntry">
<p>In my first message I forgot to say that the script is great after all.

And I discovered (reading previous comments) how to hide ranged selections (but maybe you could document that).

    <p class="posted"><a href="#commentNumber204">Comment</a> by

Rodrigo on 06/02  at  07:04 AM

<div id="commentNumber205" class="commentEntry">
<p>I think my first message was lost. I’ll try to write it again.

I’ve found a couple of bugs:
- If you select a date format different from mm/dd/yy you still have to provide dates in mm/dd/yy format (that’s not actually a bug), including when your input has a date on it (this is the bug).
- 2) When selecting allDatesFrom the field showing today displays dd/mm/2024 or dd/mm/1994 (I mean the day and month is correct, but not the year).

    <p class="posted"><a href="#commentNumber205">Comment</a> by

Rodrigo on 06/02  at  02:19 PM

<div id="commentNumber206" class="commentEntry">
<p>I’m having the same dates problem here, i set the following settings:

earliestDate: “02/25/2005”,
latestDate: “02/25/2025”,
but nothing seems to change, the calendar is not recognizing my dates, when i go to AllDatesBefore or AllDatesAfter there are other values. If i select AllDatesAfter “May 20, 2009” it returns “May 20, 2009 - Jan 13, 2015"…
are the AllDatesBefore and AllDatesAfter options not working properly ?

    <p class="posted"><a href="#commentNumber206">Comment</a> by

alex on 06/02  at  04:08 PM

<div id="commentNumber207" class="commentEntry">
<p>I had to namespace the plugin for it to work with jquery 1.3.2.

All you need to do is add this line after the top comment block:


and this line at the end of the file:


It is a good practice to do this anyway. Hope this helps anyone else running into issues with 1.3.2.

    <p class="posted"><a href="#commentNumber207">Comment</a> by

timmfin on 06/05  at  02:26 PM

<div id="commentNumber208" class="commentEntry">
<p>I have encountered a clash between the Date Range Picker plug in and the Data Tables plug in (<a href="" rel="nofollow"></a>).&nbsp; In particular the sort function of the Data Tables plug in stops working when the Date Range Picker code is included.&nbsp; A  simple test case is included below – be sure to include the path to each of the scripts.

If the script link to the Date Range Picker is commented out, as well as the association of the Date Range Picker to the input with an id of dateRange in the jQuery ready function, the table sorting works, i.e. click on the head of a table column to see the sorting.  If you then uncomment these items the table sorting no longer works.

I have stepped through the code and may have narrowed the problem down to the date.js/Coolite code included in the Date Range Picker plug in, but I can’t see from there where the conflict may be occurring. 

Any ideas/thoughts?  Thanks,

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8” />
<title>Untitled Document</title>

<!-- -->

$(document).ready(function() {

// $(’#dateRange’).daterangepicker({ arrows: true });

}); // END :: ready function



<div style="margin-bottom: 30px; border: 1px solid black; padding: 10px; width: 150px;"><input type="text" id="dateRange" /></div>

<table class="dataTable" border="1">

<td>Simple Item</td>
<td>Project 3</td>
<td>00000 Some Name</td>
<td>Project 2</td>
<td>Another Item</td>
<td>Project 3</td>


    <p class="posted"><a href="#commentNumber208">Comment</a> by

Eddie Flowers on 06/09  at  06:05 AM

<div id="commentNumber209" class="commentEntry">
<p>&lt;sXcript type="text/javascript\" src="{PATH TO}/jquery-1.3.1.min.js"&gt;

Sorry - looks like the script tags were stripped out from my post above

<sXcript type="text/javascript\" language="javascript\" src="{PATH TO}/jQuery/ui_core


<sXcript type="text/javascript\" src="{PATH TO}/dataTables-1.4.3/dataTables-1.4/media/js/jquery.dataTables.js">

<!-- -->

    <p class="posted"><a href="#commentNumber209">Comment</a> by

Eddie Flowers on 06/09  at  06:07 AM

<div id="commentNumber210" class="commentEntry">

First i want to say thank you for your great work!
Then i would like to know if there is a way to make the widget appear on a collapsible container. If the daterangepicker appears “floating” then it can be placed under a flash object.
The Google Analytics dashboard provides an excellent example of the point i’m trying to make.
Many Thanks,

    <p class="posted"><a href="#commentNumber210">Comment</a> by

Henry Contreras on 06/10  at  12:16 PM

<div id="commentNumber211" class="commentEntry">
<p>Using Jquery 1.3.2 and JqueryUI 1.7.2 with the Eggplant theme yielded problems with the date range picker options ("All Dates Before”, “Specific Date” etc) bunching up with the left hand dots. I fixed it by changing the following in ui.daterangepicker.css:

.ui-daterangepicker li {
list-style: none;
padding: 1px;
cursor: pointer;
margin: 1px 0;

.ui-daterangepicker li {
list-style: none;
padding: 1px;
cursor: pointer;
margin: 1px 0;


    <p class="posted"><a href="#commentNumber211">Comment</a> by

no on 06/11  at  02:36 PM

<div id="commentNumber212" class="commentEntry">
<p>Surely there should be a built-in way of making sure that the user never selects a second date that is earlier than the first date?

    <p class="posted"><a href="#commentNumber212">Comment</a> by

Patrick on 06/16  at  06:58 AM

<div id="commentNumber213" class="commentEntry">
<p>Hey Guys,

this is such a great plugins, right what i was looking for my new project!
Keep up the good work..

btw: a pity that it’s not positioning right yet, but i think this is going to come either :)

    <p class="posted"><a href="#commentNumber213">Comment</a> by

Stefan on 06/16  at  08:53 AM

<div id="commentNumber214" class="commentEntry">
<p>I have a feature request.

The ability to set a min and max range. To disallow users from selecting dates outside the allotted range.

    <p class="posted"><a href="#commentNumber214">Comment</a> by

Lucas on 06/20  at  05:50 PM

<div id="commentNumber215" class="commentEntry">
<p>Is there a way of unbinding the daterangepicker from an element once it as been applied similar to the destroy option of datepicker?


    <p class="posted"><a href="#commentNumber215">Comment</a> by

Milton on 06/23  at  04:09 AM

<div id="commentNumber216" class="commentEntry fg">
<p>@Milton: Sorry your comment got caught in our filter. You should be cleared now for future comments.

As for your question, unfortunately, no, that’s not currently implemented. Once this widget is refactored using the jQuery UI widget factory (for inclusion in jQuery UI) though, that will be available. I suppose you could unbind the click event that it attaches to the input though, which would probably take care of removing most of the behavior.

    <p class="posted"><a href="#commentNumber216">Comment</a> by

Scott (Filament) on 06/23  at  09:04 AM

<div id="commentNumber217" class="commentEntry">
<p>Anything with only a popup calendar?

    <p class="posted"><a href="#commentNumber217">Comment</a> by

Auto Baneasa on 06/23  at  02:11 PM

<div id="commentNumber218" class="commentEntry">
<p>Pretty nice post. I just stumbled upon your site and wanted to say

that I’ve really liked reading your blog posts. In any case
I’ll be subscribing to your feed and I hope you post again soon!

    <p class="posted"><a href="#commentNumber218">Comment</a> by

Jenny on 06/23  at  09:13 PM

<div id="commentNumber219" class="commentEntry">
<p>can you schedule the fix for multi instances? can’t do without it.

    <p class="posted"><a href="#commentNumber219">Comment</a> by

eran on 06/24  at  09:30 AM

<div id="commentNumber220" class="commentEntry">
<p>If you’re getting a bug with the onClose event being called before the end date has been assigned, you can use this hack / workaround:

var t;
function exec_delayed(){
t = setTimeout("set_date()",500);

function set_date() {
mydates = $("input.datepicker").val().split(’ - ‘);
if (mydates.length == 1) { mydates.push(mydates[0]) };
location.href = “?start_date="+mydates[0]+"&end;_date="+mydates[1];

$(’input.datepicker’).daterangepicker({ onClose: exec_delayed})

    <p class="posted"><a href="#commentNumber220">Comment</a> by

Scott Brown on 06/24  at  03:22 PM

<div id="commentNumber221" class="commentEntry">
<p>I’ve updated to the latest script to make sure I’m current. I have a question about the basic interaction model with this widget.

For the “All dates before” and “All dates after” modes, the picker adds a “Done” button.  In the calendar view, it’s possible to change the month and year and click “Done”, but no changes to the date input fields result. Now, exactly what those changes should be in that case, I don’t know; should the default day-of-month be the first day or the last? Does that depend on whether it’s “All dates before” or “All dates after?” In any case, have the button be a “Done” button seems a little wrong, since nothing is actually “done” when it’s clicked. If a day is clicked, then the widget goes away, and something actually *is* done.

Thus it seems to me that EITHER the act of changing the month and year should have some default day-of-month value such that “Done” makes the fields update to something new, OR the button should be called something like “Cancel”, since that’d be consistent with what happens.

Does that make sense?

    <p class="posted"><a href="#commentNumber221">Comment</a> by

Mike McNally on 06/25  at  09:12 AM

<div id="commentNumber222" class="commentEntry">
<p>Oh also - one more quick thing for the wish list. It’d be kind-of nice to have the fade-in rate controllable via an option.&nbsp; My site doesn’t have a lot of fade in/fade out behavior in its design, so having the date range picker act like that makes it stand out more than I’d like.

    <p class="posted"><a href="#commentNumber222">Comment</a> by

Mike McNally on 06/25  at  09:18 AM

<div id="commentNumber223" class="commentEntry">
<p>oh durr I just realized I can re-label the button myself.&nbsp; Forgive me for the spam (though I bet my co-workers will consider the label change to be a cop-out :) )

    <p class="posted"><a href="#commentNumber223">Comment</a> by

Mike McNally on 06/25  at  09:20 AM

<div id="commentNumber224" class="commentEntry">
<p>Hi.&nbsp; Me again.&nbsp; I think I have figured out the root issue.&nbsp; In my opinion, the problem is that the “closeOnSelect” flag should make it such that the special modes “Specific date”, “All dates before”, and “All dates after” do not show the “Done” button.&nbsp; When “closeOnSelect” is true, the “Done” button doesn’t serve any useful purpose - clicking a date closes the dialog.

    <p class="posted"><a href="#commentNumber224">Comment</a> by

Mike McNally on 06/25  at  03:07 PM

<div id="commentNumber225" class="commentEntry">
<p>Wonderful work!

I think there is a small bug in it, we are using it with Rails, so inside application.js we just did something like

jQuery(function($) {

but it raises the following error in each page that does not have any element with the CSS class ‘date_range_picker’.

rangeInput.val() is undefined
Line 112

Any ideas?


    <p class="posted"><a href="#commentNumber225">Comment</a> by

Cássio Marques on 06/26  at  07:30 PM

<div id="commentNumber226" class="commentEntry">
<p>OnClose() bug:

There is an error in the filamentgroup Date Range Picker onClose event. If you select a date that has the same start and end date, the end date does not get updated but is still set to the previous value. After digging through the code I came up with this solution. I posted it on my blog at:

    <p class="posted"><a href="#commentNumber226">Comment</a> by

Michael Ritsema on 07/01  at  03:13 PM

<div id="commentNumber227" class="commentEntry">
<p>Really good work. I’m wondering though- is it possible to bind the date range picker opening to the click of a specified object rather than clicking the input field?

    <p class="posted"><a href="#commentNumber227">Comment</a> by

Nigel on 07/09  at  11:25 AM

<div id="commentNumber228" class="commentEntry">
<p>Sorry about that, we just figured it out, it was a comma missing.

    <p class="posted"><a href="#commentNumber228">Comment</a> by

Paul Russo on 07/13  at  02:27 PM

<div id="commentNumber229" class="commentEntry">

very good work. Referring to range date picking, I wonder if there’s a way to expand the menus on the left instead of right. Any suggestion? Is it just a matter of changing CSS or there’s some parts of the script to modify? Thanks

    <p class="posted"><a href="#commentNumber229">Comment</a> by

Chris on 07/15  at  09:15 AM

<div id="commentNumber230" class="commentEntry">

Sorry if this is an easy question, but how do you go about getting the from/to date from the datepicker? Do you just grab the values from the .range-start and .range-end? or is there a method on the daterangepicker object?


    <p class="posted"><a href="#commentNumber230">Comment</a> by

JamesR on 07/15  at  10:23 PM

<div id="commentNumber231" class="commentEntry">
<p>hello, sorry for easy question how can i have after page load the daterangepicker ot a certain value selected. for example showing ‘today’ value first time i see the page.set it to a start select value..thanks

    <p class="posted"><a href="#commentNumber231">Comment</a> by

thommy on 07/20  at  08:59 AM

<div id="commentNumber232" class="commentEntry">
<p>I love this plugin. Can I “launch” the daterangepicker from a button instead of clicking in the field? The field is a multi-purpose search field, that will accept dates, names, keywords, etc. I need folks to be able to type anything they want in there, and not have the daterangepicker pop up when they click in the text field. I sort out what was in the text field on the server side.

Does that make any sense?

    <p class="posted"><a href="#commentNumber232">Comment</a> by

Kevin on 07/21  at  01:17 PM

<div id="commentNumber233" class="commentEntry">
<p>@Kevin: yes you can, I’ve put the code that instantiate the range picker inside another function that controls if the container DIV is already in the page: if it isn’t, it’s instantiate the object once, than with onclick events you can play with CSS properties of the DIV to show/hide the calendar.

    <p class="posted"><a href="#commentNumber233">Comment</a> by

Chris on 07/21  at  01:34 PM

<div id="commentNumber234" class="commentEntry">
<p>@Chris: Do you have a code example of this?

    <p class="posted"><a href="#commentNumber234">Comment</a> by

Kevin on 07/21  at  02:59 PM

<div id="commentNumber235" class="commentEntry">
<p>Wow the comments just keep piling up for this awesome plugin.

Similar to Kevin’s example above, I want to have a separate button instantiate a Custom Range picker. I have the code to make the full menu show up where I want in place. However, I only want the Custom Range Picker to show up, not the whole menu with the options:

Last 7 days,
Month to date,

Is that at all possible?


    <p class="posted"><a href="#commentNumber235">Comment</a> by

NR on 07/21  at  04:11 PM

<div id="commentNumber236" class="commentEntry">
<p>@Kevin: something like this:

function toggleCal()
if($(’.ui-daterangepickercontain’).length == 0)
mode: ‘range’
if($(’#inputCal’).css(’display’) == ‘none’)

    <p class="posted"><a href="#commentNumber236">Comment</a> by

Chris on 07/22  at  07:28 AM

<div id="commentNumber237" class="commentEntry">
<p>For those wondering I managed to solve my problem but have come into another one. The scenario is that I have a single text box that triggers a full Date Range Picker with all the options. I also have a separate button that brings up ONLY the Date Range Picker with the two panels for each month. Here is my Code:

presets: {dateRange: ‘Pick a Date’},
posX: 250,
posY: $(’.p2off-alt’).offset().top - 154,
onOpen: function(){
// Automatically selects the “Date Range” options
$(’.ui-daterangepicker:visible .ui-daterangepicker-dateRange a’).trigger(’click’);

// Hides the rest of the menu options
$(’.ui-daterangepicker:visible ul.ui-widget-content’).css(’display’,’none’);

// Moves the date range panel to the corrected position
$(’.ui-daterangepicker:visible div.ranges’).css(’margin-left’,0);
datepickerOptions: {altField: ‘#rangeA’}

This works well with one caveat. The altField will not populate the full range of the picker. It will only show the most recent selection of either of the two months. But if you use the original complete Range selector it will work fine.

    <p class="posted"><a href="#commentNumber237">Comment</a> by

NR on 07/22  at  08:39 AM

<div id="commentNumber238" class="commentEntry">
<p>I made two changes to daterangepicker:

“onDpChange: function(){},” after line 62 and “options.onDpChange();” after line 89 in the datepickerOptions function. I was dismayed that I couldn’t overwrite the original datepicker onSelect statements, so I appended a function to it.

    <p class="posted"><a href="#commentNumber238">Comment</a> by

Travis on 07/22  at  02:35 PM

<div id="commentNumber239" class="commentEntry">
<p>This is a really great script but I think there could be a couple of improvements! If these arn’t already options I have overlooked :)

1) A way to set default function eg range picker when clicked
2) The range picker shouldn’t let you select start dates after the end dates.
3) Highlighting of the range selected would also be very cool!

Keep it up you have restored my faith in humanity

    <p class="posted"><a href="#commentNumber239">Comment</a> by

cookie on 07/29  at  07:10 PM

<div id="commentNumber240" class="commentEntry">
<p>Hi guys,

Am tryin using this date picker in a popup form but it didn’t work.
Any help plz…

    <p class="posted"><a href="#commentNumber240">Comment</a> by

pans on 07/30  at  08:22 AM

<div id="commentNumber241" class="commentEntry">

Great work on the plugin!  I REALLY want to use this for an upcoming project, however I’m noticing some issues when I use this within jQuery UI tabs.  I’m also using blueprint css, so maybe that has something to do with it?  What I see is that the date selector doesn’t appear right under the input field.  Instead, it appears at the very bottom and to the far left of the page.  Any ideas what this could be?

    <p class="posted"><a href="#commentNumber241">Comment</a> by

Jason Palmer on 07/30  at  04:35 PM

<div id="commentNumber242" class="commentEntry">
<p>Great work :)

I had a problem with the appendTo property : the picker was displayed at the bottom left of the page (the appendTo was linked to a basic text input).

I Changed this in the source code of the picker:

//inject rp

replaced by

//inject rp

Hope it could help someone :)

    <p class="posted"><a href="#commentNumber242">Comment</a> by

Johan - KEYRIO on 07/31  at  04:52 AM

<div id="commentNumber243" class="commentEntry">
<p>Hi Guys,

I actually have solved the problem I was having.  For some reason, the appendTo property was not working for me.  I really just wanted the drop-down to show right underneath the text field itself instead of the body or the element you select for the appentTo property.

I went ahead and changed the following line from:


And that works great for me now!

    <p class="posted"><a href="#commentNumber243">Comment</a> by

Jason Palmer on 07/31  at  03:24 PM

<div id="commentNumber244" class="commentEntry">

I have a form that has 10 fields, and i will like to use this date range picker on only one field. How do i go about that? I have try changing $(’input’).daterangepicker( ); to $(’input_date’).daterangepicker( ); and the date picker does not show, here is my input box:
<input type="text" value="Select a date” id="input_date" name="input_date"/>

    <p class="posted"><a href="#commentNumber244">Comment</a> by

shaun on 07/31  at  04:16 PM

<div id="commentNumber245" class="commentEntry">
<p>@shaun :


$(’#input_date’).daterangepicker( );

instead of

$(’input_date’).daterangepicker( );

    <p class="posted"><a href="#commentNumber245">Comment</a> by

Johan - KEYRIO on 07/31  at  04:36 PM

<div id="commentNumber246" class="commentEntry">
<p>Got a problem with the dateFormat.

I have it set the the uk date format (dd/mm/yy) and this outputs the date correctly, but I have two inputs with initial values populated with the same format.
$("input#fromDate, input#toDate").daterangepicker({dateFormat: ‘dd/mm/yy’});

When I click on the input and change the date, the calenders are reading the format wrong, where dd = mm and mm = dd.

How can I go about fixing this?

    <p class="posted"><a href="#commentNumber246">Comment</a> by

Liam on 08/04  at  04:39 AM

<div id="commentNumber247" class="commentEntry">
<p>This is probably something of a n00b question but I’m not really a programmer, I just play one when budgets are tight.&nbsp;

I want to execute a search against a php page using a start and end date.  I have the date picker set up fine with a rangeA and rangeB.  My date format for the date picker is ‘MM d, yy’.  I want to change the date to mm/dd/yy format and open a new page on my site in the same window so that the action is “/resultpage.php?startdate=mm&#x2F;dd&#x2F;yy&enddate=mm&#x2F;dd&#x2F;yy” on the close function.  Can anybody give me some insight into how to do this?  Thanks!

    <p class="posted"><a href="#commentNumber247">Comment</a> by

Fritz on 08/06  at  04:08 PM

<div id="commentNumber248" class="commentEntry">
<p>On the above question the comment box mangled my URL.&nbsp; What is listed as &amp;#x2F; in the question is really a percent 2f for a URL encoded forward slash.

    <p class="posted"><a href="#commentNumber248">Comment</a> by

Fritz on 08/06  at  04:11 PM

<div id="commentNumber249" class="commentEntry">
<p>Here’s a use-case for a “None” preset which clears the input field:

The input field is read only (to avoid input validation) and not mandatory.
The picker is then used for allowing all (almost) possible types for date range selection.

Since the input is not mandatory, after a date was selected, there is no way of clearing the field. We would have to provide some sort of a “clear” button that does the job.

When such button is not feasible (due to room restrictions for instance) it would be very nice to have a preset of “None” which means no selection in the range picker for clearing the input field.

Comments are really appreciated.


    <p class="posted"><a href="#commentNumber249">Comment</a> by

Maverick on 08/09  at  09:12 AM

<div id="commentNumber250" class="commentEntry">
<p>I found that when you tab to (rather than click on) an input with daterangepicker, it didn’t trigger. I changed

//inputs toggle rangepicker visibility
return false;


//inputs toggle rangepicker visibility
return false;

return false;

    <p class="posted"><a href="#commentNumber250">Comment</a> by

Travis on 08/14  at  08:28 AM

<div id="commentNumber251" class="commentEntry">
<p>Disregard that.. blur() hides the rangepicker before you can click more than 1 date. &gt;.&lt;

    <p class="posted"><a href="#commentNumber251">Comment</a> by

Travis on 08/14  at  08:32 AM

<div id="commentNumber252" class="commentEntry">
<p>True fix to get the daterangepicker to trigger when you tab from a previous input. I’m serious, it works this time.

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];

jQuery(prev).keydown(function (e) {
if (e.which == 9) {

//inputs toggle rangepicker visibility
return false;

Bam, said the lady.

    <p class="posted"><a href="#commentNumber252">Comment</a> by

Travis on 08/14  at  09:59 AM

<div id="commentNumber253" class="commentEntry">
<p>Apologies for all of the posts. Wanted to share this; modified my previous example to accept Shift+Tab from the input following the daterangepicker as well. Now, it will launch on input click, previous input tab, and next input shift+tab. Much more accessible to folks like me that navigate forms by keyboard :P

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];
var nex = inp[index+1];

var shifttab = false;

shifttab = false;

jQuery(nex).keydown(function(e) {
if (e.which == 16) {
shifttab = true;
}else if (e.which != 9) {
shifttab = false;
}else if (e.which == 9 && shifttab) {
shifttab = false;

jQuery(prev).keydown(function (e) {
if (e.which == 9) {

if (e.which == 9) {
if (’:visible’)) {

//inputs toggle rangepicker visibility
return false;

    <p class="posted"><a href="#commentNumber253">Comment</a> by

Travis on 08/14  at  01:33 PM

<div id="commentNumber254" class="commentEntry">
<p>Last one. Keep getting input from friends on bugs. This one detects if SHIFT has been pressed and held at any part of the document, instead of just the next/previous inputs. Potentially, a user can shift+tab over an input and still launch daterangepicker.

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];
var nex = inp[index+1];

var shifttab = false;
var tabit = true;

jQuery(document).keyup(function (e) {
if (e.which==16) {
shifttab = false;

jQuery(document).keydown(function(e) {
if (e.which == 16) {
tabit = false;
shifttab = true;
}else {
if (e.which!=9) {
shifttab = false;

jQuery(prev).keydown(function (e) {
if (e.which == 9 && tabit) {

if (e.which == 9) {
if (’:visible’)) {

jQuery(nex).keydown(function(e) {
if (e.which == 9 && shifttab) {
shifttab = false;

//inputs toggle rangepicker visibility
return false;

    <p class="posted"><a href="#commentNumber254">Comment</a> by

Travis on 08/14  at  02:04 PM

<div id="commentNumber255" class="commentEntry">
<p>Hi, wonderful plugin, I’ve noticed a strange behaviour.

I’m using the date range plugin for filtering elements within a range of dates, when I select a range I do an ajax call sending the selected value.

I do this using the onClose event, but sometimes the ajaxcall is called before da date input value is changed and It sends the old range.

Any help?
Thank you

    <p class="posted"><a href="#commentNumber255">Comment</a> by

Giovanni Battista Lenoci on 08/19  at  09:26 AM

<div id="commentNumber256" class="commentEntry">
<p>Do i install it in same directory as jquery? I have mine installed c:\webprojects\testproject\scripts\[jquery lib resides here]

    <p class="posted"><a href="#commentNumber256">Comment</a> by

jd on 08/19  at  01:11 PM

<div id="commentNumber257" class="commentEntry">
<p>hi, is there a way to have the range picker open automatically on load, and stay open with only the “select range” and shortcut options available ( two calendars )?

thank you!
awesome picker!

    <p class="posted"><a href="#commentNumber257">Comment</a> by

chris on 08/20  at  07:47 PM

<div id="commentNumber258" class="commentEntry">
<p>I am posting css style fixes I had to introduce to get this control properly rendered in quirks mode (i.e. Sharepoint environment). I hope this could save somebody’s time.

<style type="text/css">
height:17px !important;
font-size:8pt !important;
padding-bottom:0 !important;
padding-top:0 !important;

font-size: 8pt !important;

var applyFix = function()
var picker = $(’div.ui-daterangepicker-arrows’);
var container = $(’div.ui-daterangepickercontain’);
var offset = picker.offset().top + picker.outerHeight();
container.css(’top’, offset);

onOpen: applyFix

<input type="text" id="DatePickerTarget" class="rangepicker-fix"/>

    <p class="posted"><a href="#commentNumber258">Comment</a> by

Vladimir Smirnov on 08/24  at  07:09 AM

<div id="commentNumber259" class="commentEntry">
<p>Humm… interesting,

I learned lots of thing reading this post and specially comments, and specially thanks to Travis

Anyway, thanks for the post

    <p class="posted"><a href="#commentNumber259">Comment</a> by

software developer on 08/27  at  01:22 PM

<div id="commentNumber260" class="commentEntry">
<p>Hi, first off thank you for such a great date picker tool, I really like the look and feel of it.&nbsp; I do have one question though, and after reading through all of the previous comments, while I found some similar comments none mentioned the problem i’m seeing.&nbsp; The picker works fine when being opened from the input box when a user clicks in it, however I was trying to also get it to be launched when a button is clicked.&nbsp; I have this working however the picker opens when I click the button but then immediately closes, it will only stay open when I actually click in the input box.&nbsp; I’m opening the datepicker in a seperate &lt;div&gt; as follows:

$("#start_date").daterangepicker( { appendTo: $(’#date_picker_container’) });

When the button is clicked I do:


Any suggestions would be greatly appreciated.

    <p class="posted"><a href="#commentNumber260">Comment</a> by

Brian on 08/27  at  01:51 PM

<div id="commentNumber261" class="commentEntry">
<p>Sorry if this has already been covered but I’m trying to have 2 input fields as separate instances of the daterangepicker but when I select a date range, the start date gets put in the first input, the end date into the second input. I need to have each one date range per input.

According to the comments, multiple instances has been recently added however can anyone clarify if 2 instances would require 4 text inputs because currently I’m unable to only have one input per instance.

    <p class="posted"><a href="#commentNumber261">Comment</a> by

Jason on 08/27  at  05:48 PM

<div id="commentNumber262" class="commentEntry">
<p>Well the last thing I did should have been one of the first - VIEW THE SOURCE!

So to answer my question look for this:
// send back to input or inputs
if(rangeInput.length == 2){
rangeInput.val((rangeA != rangeB) ? rangeA+’ ‘+ options.rangeSplitter +’ ‘+rangeB : rangeA);

And modify it to your need, in my case I just commented out the first part of the statement and left it as:

rangeInput.val((rangeA != rangeB) ? rangeA+’ ‘+ options.rangeSplitter +’ ‘+rangeB : rangeA);

    <p class="posted"><a href="#commentNumber262">Comment</a> by

Jason on 08/27  at  06:06 PM

<div id="commentNumber263" class="commentEntry">
<p>IS there a way to have a separate element that shows total number of days selected in a range?


    <p class="posted"><a href="#commentNumber263">Comment</a> by

TJ on 08/28  at  01:02 PM

<div id="commentNumber264" class="commentEntry">
<p>Kudos to a slick date picker.&nbsp; You guys were really thinking outside the box.&nbsp; Would be nice to have an option for just date range and 2 separate text boxes.&nbsp; Will have to play with that a while.

Did notice the date range allows you to pick an end date prior to the start date.  Aug 3, 2009 to Aug 1, 2009

    <p class="posted"><a href="#commentNumber264">Comment</a> by

Mike on 08/31  at  01:56 AM

<div id="commentNumber265" class="commentEntry">
<p>doesnt work in opera.. :(

    <p class="posted"><a href="#commentNumber265">Comment</a> by

Stefan on 09/01  at  04:44 AM

<div id="commentNumber266" class="commentEntry">
<p>Started using this, but noticed a bug with November. The dates just never show up correctly November. Sometimes its all 1s, other times it counts to 7 and then its all 7s. It even happens on the demos on this page. Any ideas on a fix?

    <p class="posted"><a href="#commentNumber266">Comment</a> by

Erik on 09/03  at  09:28 AM

<div id="commentNumber267" class="commentEntry">
<p>BTW, did some additional testing, seems to be a Firefox in Linux issue.

    <p class="posted"><a href="#commentNumber267">Comment</a> by

Erik on 09/03  at  09:41 AM

<div id="commentNumber268" class="commentEntry fg">
<p>@Erik  That is an odd bug that I can’t test here (no Linux). Does it happen on the standalone demo pages too?

Since this uses the jQuery UI datepicker widget, I’d be curious to know if you can reporduce the issue on their demo pages:

If so, please file a bug in the UI Trac system.

    <p class="posted"><a href="#commentNumber268">Comment</a> by

Todd (Filament) on 09/03  at  09:46 AM

<div id="commentNumber269" class="commentEntry fg">
<p>@Stefan  Can you be a little more specific on which version of Opera you’re having troubles with? I just tested this on Opera 9 and 10 on Mac and it works well in both.

    <p class="posted"><a href="#commentNumber269">Comment</a> by

Todd (Filament) on 09/03  at  09:53 AM

<div id="commentNumber270" class="commentEntry">
<p>Is it possible to the make the select calendars fly out to the left?&nbsp; Or....even so based on the viewport?

Thanks for any tips!

    <p class="posted"><a href="#commentNumber270">Comment</a> by

Ben on 09/03  at  07:49 PM

<div id="commentNumber271" class="commentEntry">
<p>This would be great as a Wordpress plugin for the admin area - I don’t have the requisite skills, but has anyone already done this?

    <p class="posted"><a href="#commentNumber271">Comment</a> by

Luke Scammell on 09/05  at  06:06 AM

<div id="commentNumber272" class="commentEntry">

I add a few PresetRanges, like ‘Last Tree Months’, ‘Last 30 days’,… and it’s working just fine.
However, I believe that we should be able to select a specif month or year, like we do it with specific date Preset. Let’s say we select August 2009, Date Range Picker input box should show 01/08/2009 - 30/08/2009. The same to a specific year, if we select year 2008, input box should show 01/01/2008 - 31/12/2009.
It will be nice if we could have these Presets, or if some one could tell me how to do it.

Regards and keep the good work

    <p class="posted"><a href="#commentNumber272">Comment</a> by

quim on 09/06  at  05:34 PM

<div id="commentNumber273" class="commentEntry">
<p>Forgive me if im being thick,

But how do you return the dates it selected for a date range, ???

I know i could get the input value element by id, but i would like to return the startDate and endDate as two separate vars in the onClose

Anyone have an example of that, using a simple alert maybe?

    <p class="posted"><a href="#commentNumber273">Comment</a> by

Alex on 09/07  at  09:22 AM

<div id="commentNumber274" class="commentEntry">

Any one can help me with this one?

we should be able to select a specif month or year, like we do it with specific date Preset. Let’s say we select August 2009, Date Range Picker input box should show 01/08/2009 - 31/08/2009. The same to a specific year, if we select year 2008, input box should show 01/01/2008 - 31/12/2009.
It will be nice if we could have these Presets, or if some one could tell me how to do it.


    <p class="posted"><a href="#commentNumber274">Comment</a> by

quim on 09/18  at  04:10 AM

<div id="commentNumber275" class="commentEntry">

My control is set into a Div and I position it around the page using CSS. The problem I am encountering is that the textbox is positioned according to the given X,Y coordinates (Absolute, Left and Top) but the surrounding border, next and previous buttons are stuck at the top of the page. I have set the calendar positions from the javascript files. However I cant find where I can set the position of the border (in your examples its blue) and buttons. I would appreciate some help on this matter.

For the rest Excellent work. This control work very smooth, lets a user select a particular date or range without any problems. Keep it up and PLEASE keep on giving the community more of this excellent stuff.

    <p class="posted"><a href="#commentNumber275">Comment</a> by

Chali Wires on 09/20  at  04:14 PM

<div id="commentNumber276" class="commentEntry">
<p>Resolved the issue. Removed the Css tag name from the input control. Wrapped the whole control into a &lt;Div&gt; Statement, and positioned the Div.

Keep up the good work!!!

    <p class="posted"><a href="#commentNumber276">Comment</a> by

Chali Wires on 09/21  at  06:29 AM

<div id="commentNumber277" class="commentEntry">
<p>I was using daterangepicker on a jquery ui dialog. While “Close” was hiding it, ESC or clicking X would leave daterangepicker open. Until destroy() is properly implemented I am using this:

$(field).closest(’.dialog’).bind(’dialogclose’, function(event,ui){

also to float element over dialog, i needed to fix z-index:

.ui-daterangepickercontain {
position: absolute;
z-index: 1999;

hope this helps.

    <p class="posted"><a href="#commentNumber277">Comment</a> by

Romans Malinovskis on 09/29  at  01:46 AM

<div id="commentNumber278" class="commentEntry">
<p>Great work!..


when I use daterangepicker in ui-tabs plugin .ui-daterangepickercontain display under body. datepicker work normally.

how fix it?

    <p class="posted"><a href="#commentNumber278">Comment</a> by

ploutos on 09/30  at  12:29 AM

<div id="commentNumber279" class="commentEntry">
<p>Just one wish : I would really like an option that displays the 2 calendars (date range) by default. Having to click on “date range” doesn’t feel natural to me.

Great plugin! Thank you

    <p class="posted"><a href="#commentNumber279">Comment</a> by

Frank on 09/30  at  08:52 AM

<div id="commentNumber280" class="commentEntry">
<p>Can someone give me a code snippet to change

the language of the days. I know hot todo it with
the datepicker, but doesn’t work in this daterangepicker.

    <p class="posted"><a href="#commentNumber280">Comment</a> by

Martijn on 10/01  at  07:26 AM

<div id="commentNumber281" class="commentEntry">
<p>I’m having a problem with the “Add Dates Before” option. It keeps defaulting as the startDate to 10/18/2009 for some reason. (Today’s date, the day of testing, is 10/02/2009). I have the most recent version of the plug-in, but only jQuery UI 1.6.4. Do I need to upgrade my jQuery UI file? If not, any tips on past experience with this issue?

    <p class="posted"><a href="#commentNumber281">Comment</a> by

Kris on 10/02  at  09:50 AM

<div id="commentNumber282" class="commentEntry">
<p>Works well but has some issues as previously mentioned (@Liam RE: UK date format).

- I use AU date format d/m/y which outputs OK but when setting a default value of the input field it selects the calendars for m/d/y (so 1/2/09 should select 1 Feb but it selects 2 Jan)

- IE gives an error “Line 125: ‘this.text’ is null or not an object”

    <p class="posted"><a href="#commentNumber282">Comment</a> by

Peter on 10/06  at  10:55 PM

<div id="commentNumber283" class="commentEntry">
<p>Am I in a situation where my comment has been taken out or did I forget to send it over the wire :-)

r. Sandor

    <p class="posted"><a href="#commentNumber283">Comment</a> by

carstep on 10/07  at  01:24 PM

<div id="commentNumber284" class="commentEntry">
<p>I again, I forget to send my comment, sorry posting doubled, remove my previous one :-)

Greet work guys / girls, it’s an awesome component

I have only few questions
- can the popup happen when I click on a button instead of an input, not jQuery UI like datepicker icon?
- does the latestDate option work right now, I could easily set other date behind the latestDate on the datepicker? e.g. I set to ‘today’, is it right so?
- why can the start date being later than the stop date?

keep on developing
r. Sandor

    <p class="posted"><a href="#commentNumber284">Comment</a> by

carstep on 10/07  at  01:34 PM

<div id="commentNumber285" class="commentEntry">
<p>Use “Date.parseExact” instead of “Date.parse” if you use different date format.

Be careful using date format with jQuery or DateJS library.

    <p class="posted"><a href="#commentNumber285">Comment</a> by

Albert on 10/08  at  08:24 AM

<div id="commentNumber286" class="commentEntry">
<p>The pure superb-ness of this date-picker is really inspiring. Great work. Keep it up.

    <p class="posted"><a href="#commentNumber286">Comment</a> by

Kyle Farris on 10/19  at  10:50 AM

<div id="commentNumber287" class="commentEntry">

I’m still searching for a functionality where I can peek a specific year to get the full period like 01/01/2009 to 31/12/2009 or a specific month where I get the the full period like 01/01/2009 to 31/01/2009.


    <p class="posted"><a href="#commentNumber287">Comment</a> by

quim831 on 10/22  at  08:54 AM

<div id="commentNumber288" class="commentEntry">

I have a little problem with the daterangepicker. I would like to save its input field’s value through the POST action so the value won’t disappear from the input field. In other words I would like to just force daterangepicker to remember its value through the POST to the same page.

Is this possible? And if yes.. please tell me how :-)

Thanks in advance!

    <p class="posted"><a href="#commentNumber288">Comment</a> by

CC on 10/22  at  06:02 PM

<div id="commentNumber289" class="commentEntry">
<p>Verry good code, Thanks for this… I’m looking for an tools like this !!

This is an very good solution !!! :) :) :)

    <p class="posted"><a href="#commentNumber289">Comment</a> by

Sun Location on 10/23  at  08:32 AM

<div id="commentNumber290" class="commentEntry">
<p>As a convenience I’ve added another option “sticky” (default true) for anyone who would rather have the widget disappear when the mouse leaves the widget rather than on click.

Last few lines of the code:
if( options.sticky ){return false;}).hide();
return this;

Of course you need to add “sticky:false” to the options array near the top too.

    <p class="posted"><a href="#commentNumber290">Comment</a> by

Greg on 11/10  at  12:20 PM

<div id="commentNumber291" class="commentEntry">

Is there a easy way to get all the dates included in a date range highlighted?


    <p class="posted"><a href="#commentNumber291">Comment</a> by

Adrien on 11/11  at  04:15 PM

<div id="commentNumber292" class="commentEntry">
<p>First, thanks very much for making this.&nbsp; I’m getting great use out of it, it makes my map much slicker, and I really appreciate it.

I have the same issue/request as Brian and a couple other posters.  I have the need to open the date picker on a button click as well as by clicking on the textbox. 

I have done: $("#start_date").click();
which opens the picker, but it immediately starts to close, even if my mouse makes it to the menu in time.

Is it possible to keep the menu open until the usual click trigger (inside or outside the menu)?

Thanks for any ideas and suggestions.

    <p class="posted"><a href="#commentNumber292">Comment</a> by

Ed on 11/13  at  06:42 PM

<div id="commentNumber293" class="commentEntry">
<p>Thanks for this great plugin!

    <p class="posted"><a href="#commentNumber293">Comment</a> by

Maxime on 11/23  at  09:07 AM

<div id="commentNumber294" class="commentEntry">
<p>@Scott, not sure if you have fix the issue on Safari or not from go through this post ... Just FYI that I make it work on Safari by just moving the following line ...

to the line after
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);

It seems the issue is gone after the element has been added to dom.

Hope this could be helpful ... And, really a great plugin ~ :-)

    <p class="posted"><a href="#commentNumber294">Comment</a> by

Tomato on 11/26  at  10:02 AM

<div id="commentNumber295" class="commentEntry">
<p>I also had some problem with datepicker. Now it resolved thanks

    <p class="posted"><a href="#commentNumber295">Comment</a> by

Basil on 11/26  at  10:02 PM

<div id="commentNumber296" class="commentEntry">

I’ve been trying to get this to work:

{text: 'Week to date', dateStart: function(){ var x =; return; }, dateEnd: 'today' }

But it keeps saying that getWeek() and setWeek aren’t functions.

I have tried including the date.js file, but then it throws up the error ‘too much recursion’.

Do you know if there is a way to get these functions to work, as it would make the overall script so much more powerful.

Happy December!

    <p class="posted"><a href="#commentNumber296">Comment</a> by

Charlie on 12/01  at  09:07 AM

<div id="commentNumber297" class="commentEntry">
<p>Maybe this is a dumb question, but I’ve been reading these comments for about an hour now, and haven’t found the answer.

Within the “onClose” event, how can I get the actual date value(s) that were selected?

    <p class="posted"><a href="#commentNumber297">Comment</a> by

Phil Desrosiers on 12/04  at  01:53 PM

<div id="commentNumber298" class="commentEntry">
<p>Another dumb question: What is the purpose of the “Done” button, when the picker closes as soon as I click a date?

    <p class="posted"><a href="#commentNumber298">Comment</a> by

Phil Desrosiers on 12/04  at  02:00 PM

<div id="commentNumber299" class="commentEntry">
<p>Another question: When the range picker is within a scrollable DIV, clicking on the input shows the dropdown menu at the input’s absolute “bottom”, rather than it’s real “bottom”.

to reproduce: Take the example, put it in a container div after a couple of paragraphs, scroll the div down a bit, then click on the input box. The drop down doesn’t display correctly…

    <p class="posted"><a href="#commentNumber299">Comment</a> by

Phil Desrosiers on 12/06  at  06:12 PM

<div id="commentNumber300" class="commentEntry">
<p>I am having a bit of trouble using this inside a form to select dates.&nbsp; I want to use this to select dates in a mysql database and when the submit button is selected the data is selected using the date picker.&nbsp; I am unable to get the dateStart and dateEnd variables.&nbsp; Can anyone assist?

    <p class="posted"><a href="#commentNumber300">Comment</a> by

Timms on 12/10  at  10:00 AM

<div id="commentNumber301" class="commentEntry">
<p>I was able to retrieve data from the database usins the selector, however how can I add functions that will allow me to choose last 7 days, last month, current month?&nbsp; Here is the current code I have.

$(function() {
$("#datepicker").datepicker({altField: ‘#alternate’, altFormat: ‘yy-mm-dd’});

I haven’t been able to find through the doc’s on what to add.

    <p class="posted"><a href="#commentNumber301">Comment</a> by

Timms on 12/10  at  12:35 PM

<div id="commentNumber302" class="commentEntry">
<p>Scratch my previous post, I was able to get it working.&nbsp;  Awesome work on this by the way.

    <p class="posted"><a href="#commentNumber302">Comment</a> by

Timms on 12/11  at  08:08 AM

<div id="commentNumber303" class="commentEntry">
<p>Couple of days back, I started using Filament date picker. I found the stuff is very useful and effective. I have couple of doubts regarding datepicker. I hope some one can help me out.

* I need to disable all the dates after today [ eg: if today is 11-dec-2009, all dates after 11th should me made invisible or by disabling click event
* I also need to start from particular year and month [eg: March: 2008 ....]

    <p class="posted"><a href="#commentNumber303">Comment</a> by

Philip on 12/11  at  08:09 AM

<div id="commentNumber304" class="commentEntry">
<p>It’s not working property of earliestDate, latestDate, so I made the following changes to work:

At line 200 add this:

rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);
    <p class="posted"><a href="#commentNumber304">Comment</a> by

Grover Campos on 12/17  at  03:42 PM

<div id="commentNumber305" class="commentEntry">
<p>Nice work .. Keep rocking ..

    <p class="posted"><a href="#commentNumber305">Comment</a> by

Selva on 12/22  at  10:37 PM

<div id="commentNumber306" class="commentEntry">
<p>One thing I noticed in this great project is if the input field moved positions in the page the daterangepicker popup stayed in the old position. To resolve this I removed the following lines:

posX: rangeInput.offset().left, // x position
posY: rangeInput.offset().top + rangeInput.outerHeight(), // y position

rp.parent().css(’left’, options.posX);
rp.parent().css(’top’, options.posY);

and changed;

//inputs toggle rangepicker visibility
return false;


//inputs toggle rangepicker visibility
rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());
return false;

in version 01.19.2008 of daterangepicker.

    <p class="posted"><a href="#commentNumber306">Comment</a> by

William Shostak on 01/05  at  11:00 PM

<div id="commentNumber307" class="commentEntry">

May i know how to prompt out an alert message when i click the date range?

Error message: Start Date should be before End Date.


    <p class="posted"><a href="#commentNumber307">Comment</a> by

Jessie on 01/06  at  03:16 AM

<div id="commentNumber308" class="commentEntry">
<p>The Datejs doesn’t return the right value for  “next friday +”, which works on the

Datejs home page test,

“today +” works

I’m using 2 inputs

presetRanges: [
{text: ‘Today’, dateStart: ‘Today’, dateEnd: ‘today +’ },
{text: ‘Next Friday’, dateStart: ‘next friday’, dateEnd: “next friday +” },
{text: ‘Next Saturday’, dateStart: ‘next saturday’, dateEnd: “next saturday +” }


    <p class="posted"><a href="#commentNumber308">Comment</a> by

Daxon on 01/10  at  09:09 PM

<div id="commentNumber309" class="commentEntry">
<p>never mind, Used the API instead,

{text: ‘Today’, dateStart: ‘Today’, dateEnd: ‘today +’ },
{text: ‘Next Friday’, dateStart: ‘next friday’, dateEnd: function(){ return; }},
{text: ‘Next Saturday’, dateStart: ‘next saturday’, dateEnd: function(){return; }}

    <p class="posted"><a href="#commentNumber309">Comment</a> by

Daxon on 01/10  at  09:29 PM

<div id="commentNumber310" class="commentEntry">
<p>How can I control font size?&nbsp; In the demo the html body font size is changed to around 60%.&nbsp; Nice for a demo but in practice I don’t want my whole page shrunk.&nbsp; I tried setting .ui-datepickercontain to the 60% but nothing happened.&nbsp; Is there a better way to resize just the datepicker pop-up+calendars?


    <p class="posted"><a href="#commentNumber310">Comment</a> by

Greg on 01/15  at  11:56 AM

<div id="commentNumber311" class="commentEntry">
<p>Is this compatible with jQuery 1.4?

    <p class="posted"><a href="#commentNumber311">Comment</a> by

Timms on 01/19  at  11:59 AM

<div id="commentNumber312" class="commentEntry">

Hmm, this datepicker is strange.

It allows the end date to be before the start date, i.e.: 1/27/2010 - 1/10/2010

That defeats the purpose of a date picker.

Is there a fix or configuration for this?

    <p class="posted"><a href="#commentNumber312">Comment</a> by

Pasci on 01/20  at  05:09 AM

<div id="commentNumber313" class="commentEntry">
<p>I’m using datepicker - great app.&nbsp; I need the calendar to display certain dates in different colors if we have home/away games.&nbsp; Is there a way to feed dates prior to the calendar displaying that will change the background-color for these specific dates?&nbsp; I’ll talk with some javascript programmers to see if they can write some script to modify the ui for this, but was wondering if anything was in the works for future versions that may do this.

    <p class="posted"><a href="#commentNumber313">Comment</a> by

LG on 01/20  at  10:51 PM

<div id="commentNumber314" class="commentEntry">
<p>Has anyone managed to figure out how to get the “Date Range” to show by default without having to click from the dropdown menu?

It would be amazing to have the 2 calendar screen pop straight down from the input box.

    <p class="posted"><a href="#commentNumber314">Comment</a> by

ian on 01/21  at  06:23 AM

<div id="commentNumber315" class="commentEntry">
<p>A great &amp; cool widget. It is easy to use &amp; integrate. We can also use multiple instances in the same page. Yes i did it!!!!!!!!!

    <p class="posted"><a href="#commentNumber315">Comment</a> by

varun on 01/22  at  01:12 AM

<div id="commentNumber316" class="commentEntry">

I’d like to point out the potential issues caused by redefining Date.parse to your own function. I have another plugin that heavily relies on using Javascript’s Date.parse and has been having problems because Date.parse is no longer what is expected. This is a global language definition and should not be changed by a jQuery plugin.

    <p class="posted"><a href="#commentNumber316">Comment</a> by

supster on 01/29  at  06:03 PM

<div id="commentNumber317" class="commentEntry">
<p>about the “how can i show only the range part of the plugin without showing the left menu”, heres what i do:

onOpen: function(){
var rp = $(".ui-daterangepicker:visible");
rp.find(”.ranges").css("marginLeft", “0px");

    <p class="posted"><a href="#commentNumber317">Comment</a> by

alex on 02/01  at  04:20 PM

<div id="commentNumber318" class="commentEntry">
<p>I have a need to use multiple date picker instances in one page and was wondering if any progress is being made towards this known “Still To do” issue?

    <p class="posted"><a href="#commentNumber318">Comment</a> by

SteveA on 02/02  at  02:16 PM

<div id="commentNumber319" class="commentEntry">
<p>For Multiple instances use these following code:


At last, just assign classes (datePicker1,datePicker2,datePicker3) for your input boxes. There is no need of CSS for the above class

    <p class="posted"><a href="#commentNumber319">Comment</a> by

Varunkumar on 02/02  at  11:43 PM

<div id="commentNumber320" class="commentEntry">
<p>Thanks but what you are suggesting is something I had already tried.&nbsp; The problem is that if you have datepickers in a vertical column and you start at the bottom column and click once on each that the pop-ups overlap each other and the current one clicked does not go away when you click on the one above it.

You can see that if you take the download and in the example replace the function and input with what’s below:


<input class="datePicker1" type="text" value="4/23/99" id="rangeA" />
<input class="datePicker2" type="text" value="4/24/99" id="rangeB" />
<input class="datePicker3" type="text" value="4/25/99" id="rangeC" />
<input class="datePicker4" type="text" value="4/26/99" id="rangeD" />

    <p class="posted"><a href="#commentNumber320">Comment</a> by

SteveA on 02/03  at  02:34 PM

<div id="commentNumber321" class="commentEntry">

Great picker! I’d like to use the example with multiple inputs. In the example when you select today, or any single date, the second input is given the value of the first. I’m using this for a calendar application that gets confused when the end date is not null for single dates. It also looks confusing on the front-end for users. Is there a workaround to prevent this?

Alternatively, is there a simple process for parsing the single input version values to get the start and end dates into a mysql table using php?

Thanks for any help,


    <p class="posted"><a href="#commentNumber321">Comment</a> by

tony on 02/04  at  12:11 PM

<div id="commentNumber322" class="commentEntry fg">
<p>@tony: it’s beyond the scope of this article, but I’d imagine you could find that pretty easily in PHP by splitting the query parameter’s value into an array using the rangeSplitter character (which defaults to “ to “).

Something like…

$range = $_GET[’daterange’];
$dates = explode(” to “, $range);
$dates[0]; // start date
$dates[1]; // end date

    <p class="posted"><a href="#commentNumber322">Comment</a> by

Scott (Filament) on 02/04  at  12:54 PM

<div id="commentNumber323" class="commentEntry">
<p>Hi Scott and thanks for the quick reply.

So is it not possible to have the calendar add the single dates to only to the first input and not the second?

Thanks for the php code. I’ll try and see what I can come up with, but it sure would be a lot simpler to set the calendar script to only populate the first input on single date selections.  Seems like that should be possible.

Thanks again for the help. I’m planning on using this in a few situations, and it should work fine where I don’t need multiple inputs. If you get this figured out please let me know. There may be others with the same need?


    <p class="posted"><a href="#commentNumber323">Comment</a> by

tony on 02/04  at  01:15 PM

<div id="commentNumber324" class="commentEntry">

how can get a specific theme from her

and remove the left side (just show calender)

    <p class="posted"><a href="#commentNumber324">Comment</a> by

Sami on 02/10  at  05:58 AM

<div id="commentNumber325" class="commentEntry fg">
<p>@Sami - If you just want a simple calendar picker, use the jQuery UI datepicker plugin instead: <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber325">Comment</a> by

Todd (Filament) on 02/10  at  09:51 AM

<div id="commentNumber326" class="commentEntry">
<p>Yes this What wanted but how you can select specific them in the link the them in the orange color and in this link
the them color gray how can make this

    <p class="posted"><a href="#commentNumber326">Comment</a> by

Sami on 02/16  at  05:00 AM

<div id="commentNumber327" class="commentEntry">
<p>How do you make the default open set to “Date range”

I tried the code you provided above to no avail. Please help. I am a newbie.

    <p class="posted"><a href="#commentNumber327">Comment</a> by

brett on 02/16  at  10:26 PM

<div id="commentNumber328" class="commentEntry">
<p>Here is the code example. <a href="" rel="nofollow"></a> - Basically I want the “date range” to show up by default when the user clicks to open it. Can some please tell me how to do it? I spent a long time trying to figure it out and could not get it to work. Thank you.

    <p class="posted"><a href="#commentNumber328">Comment</a> by

brett on 02/17  at  02:12 PM

<div id="commentNumber329" class="commentEntry">
<p>Hey guys, I figured it out. If you want the date range to display by default use:

$(’input’).click(function() {
$(’.ui-daterangepicker:visible .ui-daterangepicker-dateRange’).click();

    <p class="posted"><a href="#commentNumber329">Comment</a> by

brett on 02/18  at  02:18 PM

<div id="commentNumber330" class="commentEntry">
<p>I would still like to use multiple date range picker controls on the same page and in fact just yesterday had another application for that but unfortunately it still isn’t supported and best I can tell isn’t actively being worked on.

Can we get an update if and when this may be feasible?


    <p class="posted"><a href="#commentNumber330">Comment</a> by

Steve on 02/18  at  02:38 PM

<div id="commentNumber331" class="commentEntry">
<p>I’ve been having a few issues with the date range picker, namely with limiting dates and pre-date selection.

I’ve found the code which will do both individually, but not together.

Limit maximum/minmum selectable dates
rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);

On first load read from input to date range picker the start and end dates

When the two are combined the .datepicker(‘option’,… takes precedence over the pre-entered date selection.
After much code juggling and searching forums and obviously Google, I see people have had similar problems but no mention of a solution.
I would greatly appreciate any info. or workarounds

    <p class="posted"><a href="#commentNumber331">Comment</a> by

Matthew Scott on 02/19  at  06:14 AM

<div id="commentNumber332" class="commentEntry">
<p>It would also be good if the above limitations could affect the other picker.

For example the date end cannot be before the date start and vice versa.

    <p class="posted"><a href="#commentNumber332">Comment</a> by

Matthew Scott on 02/19  at  06:15 AM

<div id="commentNumber333" class="commentEntry">
<p>How to change the location of the daterange picker?

here is the issue :

if the input textbox is in the far right side of the screen,when I click on it,a menu appear with options like (daterange,days before,..etc) now when I click on the pointer next to them (so I can choose a date),the daterangepicker is wrapped and appears at the bottom of the menu,I don’t want that,I want it to appear to the left) which means that the direction of the cursors must be changed too,how I can fix this?

it’s easy to reproduce the behavior,just put the input to the far right side of the screen and play it.

    <p class="posted"><a href="#commentNumber333">Comment</a> by

alaa9jo on 02/23  at  10:09 AM

<div id="commentNumber334" class="commentEntry">
<p>Setting today as the minDate (earliestDate).

I’ve using Date Range and it works great - but I want today to be the earliest possible date.  I’ve read through all these comments and I can’t figure out how to do this.  I’m using everything ‘out of the box’ (no changes to the code) and this is my script:
$(’#startdate, #enddate’).daterangepicker({
dateFormat: ‘D M d, yy’
Any help on what I need to do would be greatly appreciated.

    <p class="posted"><a href="#commentNumber334">Comment</a> by

blorriman on 02/24  at  01:16 PM

<div id="commentNumber335" class="commentEntry">

You can do it but you’ll have to update the plugin, in the function “jQuery.fn.clickActions” add the lines (before the if statement);

rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);

and at the top of the plugin in the presets such as rangestarttitle and rangeendtitle add the line;

earliestDate: Date.parse(’today’), //earliest date allowed

    <p class="posted"><a href="#commentNumber335">Comment</a> by

Matthew Scott on 02/26  at  04:03 AM

<div id="commentNumber336" class="commentEntry">

I’ve been using your Date-Range-Picker in my recent project. But I had to dismiss it, because you’re using ugly scoping of variables, which leads to interference with other jquery plugins, such as the javascript that are needed within the cms I’m using. I don’t wan’t to blame you, in opposite, you’ve really done a good job on creating this!! The idea is brilliant!

But I’m sure this can be done much easier than you’ve tried to do it. Really!
You can wait for a “click” event on a specific input field and trigger a function that display you a simple list, like what you plugin does and when you click onto “Daterange” it runs a callback function that fires the original but with a little offset. That is absolutely all you’ve to do.

I don’t know why you’ve wasted your time concentrating on gimmick functionality rather than the main functionality, the “Daterange-Picking”. But I can tell you one thing, it happens very often to mee to, that I caught myself doing fun and fancy stuff with the tools I have rather then actually finializing the main work..

“Nobody is good, when he has nobody critisizing him/her!”

Don’t take this bad, I’m not someone who points with a finger on you. I honestly respect all of your work and I’d like to give you the positive critics back you deserve :)

Great job, but maybe you’re overcomplicating stuff..still I’d like to thank for your pioneer work, you’re always doing on the “Filamentgroup Lab”.

cheers & beers

    <p class="posted"><a href="#commentNumber336">Comment</a> by

Fernandos on 03/01  at  04:43 PM

<div id="commentNumber337" class="commentEntry">
<p>How do you use the posX to align the dropdown to the right of the input box and/or anchor the right of the dropdown box instead of the left - I want to be able to have the single date and date range slide to the left of the dropdown instead of the right.

    <p class="posted"><a href="#commentNumber337">Comment</a> by

Peter on 03/02  at  12:31 AM

<div id="commentNumber338" class="commentEntry">
<p>One suggestion for updating this very useful script. I need to add an onChange event when i click the menu “Today, Last 7 days, etc” to position the datepicker container to absolute center. I`ve added at line 245 (in jQuery.fn.clickActions funtion at the end, before return) the line setTimeout(function(){options.onChange();}, 400);

Nice work and best regards

    <p class="posted"><a href="#commentNumber338">Comment</a> by

Ceana Razvan on 03/04  at  07:52 AM

<div id="commentNumber339" class="commentEntry">
<p>This daterangepicker is showing up behind select boxes in IE 6.&nbsp; The daterange jquery ui plugin works fine, but when changed to daterangepicker it’s behind select boxes.&nbsp; Is something with bgiframe not working with daterangepicker?

    <p class="posted"><a href="#commentNumber339">Comment</a> by

Jeremy on 03/07  at  05:05 PM

<div id="commentNumber340" class="commentEntry">
<p>@Jeremy I don’t want to be rude, but do everyone a favour and stop supporting IE6.

    <p class="posted"><a href="#commentNumber340">Comment</a> by

ChazUK on 03/07  at  05:13 PM

<div id="commentNumber341" class="commentEntry">

was implementing the daterangepicker and I’m running into the onclose problem, where the event is fired before the second date is updated.

Is anyone working on a solution?

The suggestion to use:

does not work and gives me the same issue.


    <p class="posted"><a href="#commentNumber341">Comment</a> by

lleto on 03/08  at  04:03 PM

<div id="commentNumber342" class="commentEntry">

decided to try the comment by Scott Brown from a little while back.

To make this work like the onclose function would work I modified it to this:

var t;
function exec_delayed(){
t = setTimeout("set_date()",500);

function set_date() {
// make sure that your input box has an id dates (or rename the #dates)
dates = $("#dates").val();
// this gives you the exact information as it is in the input box

// run your code here


onClose: function(){

    <p class="posted"><a href="#commentNumber342">Comment</a> by

lleto on 03/08  at  04:30 PM

<div id="commentNumber343" class="commentEntry">
<p>Hi Everyone:

Many of us wanted the “Clear” option and so Am I,but I think the authors maybe not interested or something I don’t know,but I faced a case where I don’t want the user to type anything in the input and just allow him/her just to select a date,if the user wanted to clear the field then I must have an option to clear the field which is not implemented..yet.

Anyway,the authors did a great job thanks to them but in return we need to help them right? the script is available so I modified it and implemented the Clear feature. ;-)

here is the code (I will not post whole script,just the parts that I modified):

First Part:
jQuery.fn.daterangepicker = function(settings) {
var rangeInput = jQuery(this);

var options = jQuery.extend({
presetRanges: [
{ text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ },
{ text: ‘Last 7 days’, dateStart: ‘today-7days’, dateEnd: ‘today’ },
{ text: ‘Month to date’, dateStart: function() { return Date.parse(’today’).moveToFirstDayOfMonth(); }, dateEnd: ‘today’ },
{ text: ‘Year to date’, dateStart: function() { var x = Date.parse(’today’); x.setMonth(0); x.setDate(1); return x; }, dateEnd: ‘today’ },
{text: ‘The previous Month’, dateStart: function() { return Date.parse(’1 month ago’).moveToFirstDayOfMonth(); }, dateEnd: function() { return Date.parse(’1 month ago’).moveToLastDayOfMonth(); } }
//{text: ‘Tomorrow’, dateStart: ‘Tomorrow’, dateEnd: ‘Tomorrow’ },
//{text: ‘Ad Campaign’, dateStart: ‘03/07/08’, dateEnd: ‘Today’ },
//{text: ‘Last 30 Days’, dateStart: ‘Today-30’, dateEnd: ‘Today’ },
//{text: ‘Next 30 Days’, dateStart: ‘Today’, dateEnd: ‘Today+30’ },
//{text: ‘Our Ad Campaign’, dateStart: ‘03/07/08’, dateEnd: ‘07/08/08’ }
//presetRanges: array of objects for each menu preset.
//Each obj must have text, dateStart, dateEnd. dateStart, dateEnd accept date.js string or a function which returns a date object
presets: {
specificDate: ‘Specific Date’,
allDatesBefore: ‘All Dates Before’,
allDatesAfter: ‘All Dates After’,
dateRange: ‘Date Range’,
clear: ‘Clear’
rangeStartTitle: ‘Start date’,
rangeEndTitle: ‘End date’,
nextLinkText: ‘Next’,
prevLinkText: ‘Prev’,
doneButtonText: ‘Done’,
clearValue: ‘’,
earliestDate: Date.parse(’-15years’), //earliest date allowed
latestDate: Date.parse(’+15years’), //latest date allowed
rangeSplitter: ‘-’, //string to use between dates in single input
dateFormat: ‘m/d/yy’, // date formatting. Available formats:;.datepicker.formatDate
closeOnSelect: true, //if a complete selection is made, close the menu
arrows: false,
posX: rangeInput.offset().left, // x position
posY: rangeInput.offset().top + rangeInput.outerHeight(), // y position
appendTo: ‘body’,
onClose: function() { },
onOpen: function() { },
onChange: function() { },
datepickerOptions: null //object containing native UI datepicker API options
}, settings);

//custom datepicker options, extended by options
var datepickerOptions = {
onSelect: function() {
if (rp.find(’.ui-daterangepicker-specificDate’).is(’.ui-state-active’)) {
rp.find(’.range-end’).datepicker(’setDate’, rp.find(’.range-start’).datepicker(’getDate’));
else if (rp.find(’.ui-daterangepicker-clear’).is(’.ui-state-active’)) {

if (!rp.find(’.ui-daterangepicker-clear’).is(’.ui-state-active’)) {
var rangeA = fDate(rp.find(’.range-start’).datepicker(’getDate’));
var rangeB = fDate(rp.find(’.range-end’).datepicker(’getDate’));

//send back to input or inputs
if (rangeInput.length == 2) {
else {
rangeInput.val((rangeA != rangeB) ? rangeA + ‘ ‘ + options.rangeSplitter + ‘ ‘ + rangeB : rangeA);
//if closeOnSelect is true
if (options.closeOnSelect) {
if (!rp.find(’li.ui-state-active’).is(’.ui-daterangepicker-dateRange’) && !’:animated’)) {
defaultDate: +0

//change event fires both when a calendar is updated or a change event on the input is triggered

//datepicker options from options
options.datepickerOptions = (settings) ? jQuery.extend(datepickerOptions, settings.datepickerOptions) : datepickerOptions;

//Capture Dates from input(s)
var inputDateA, inputDateB = Date.parse(’today’);
var inputDateAtemp, inputDateBtemp;
if (rangeInput.size() == 2) {
inputDateAtemp = Date.parse(rangeInput.eq(0).val());
inputDateBtemp = Date.parse(rangeInput.eq(1).val());
if (inputDateAtemp == null) { inputDateAtemp = inputDateBtemp; }
if (inputDateBtemp == null) { inputDateBtemp = inputDateAtemp; }
else {
inputDateAtemp = Date.parse(rangeInput.val().split(options.rangeSplitter)[0]);
inputDateBtemp = Date.parse(rangeInput.val().split(options.rangeSplitter)[1]);
if (inputDateBtemp == null) { inputDateBtemp = inputDateAtemp; } //if one date, set both
if (inputDateAtemp != null) { inputDateA = inputDateAtemp; }
if (inputDateBtemp != null) { inputDateB = inputDateBtemp; }

//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function() {
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);
jQuery.each(options.presetRanges, function() {
jQuery(’<li class="ui-daterangepicker-’ + this.text.replace(/ /g, ‘’) + ‘ ui-corner-all">‘ + this.text + ’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)
var x = 0;
jQuery.each(options.presets, function(key, value) {
if (key == ‘clear’)
{ jQuery(’<li class="ui-daterangepicker-’ + key + ‘ preset_’ + x + ‘ ui-helper-clearfix ui-corner-all">‘ + value + ’</li>’).appendTo(ul); }
{ jQuery(’<li class="ui-daterangepicker-’ + key + ‘ preset_’ + x + ‘ ui-helper-clearfix ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span>‘ + value + ’</li>’).appendTo(ul); }

Second Part:
//preset menu click events
jQuery.fn.clickActions = function(rp, rpPickers, doneBtn) {

if (jQuery(this).is(’.ui-daterangepicker-specificDate’)) {
setTimeout(function() { doneBtn.fadeIn(); }, 400);
else if (jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)) {
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
else if (jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)) {
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
else if (jQuery(this).is(’.ui-daterangepicker-dateRange’)) {
setTimeout(function() { doneBtn.fadeIn(); }, 400);
else if (jQuery(this).is(’.ui-daterangepicker-clear’)) {
else {
//custom date range
rp.find(’.range-start, .range-end’).hide(400, function() {
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) : jQuery(this).data(’dateStart’)();
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’)();
rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);
rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’).trigger(’click’);

return false;

That’s it!

    <p class="posted"><a href="#commentNumber343">Comment</a> by

alaa9jo on 03/09  at  03:02 AM

<div id="commentNumber344" class="commentEntry">
<p>SOLUTION FOR: When onClose event has been triggered, only the first date is updated. After then onClose event, the second date will update. This is a problem when we try to do Ajax inside onClose event. Only the first date is being changed and sent to server. This is using the one textbox for both dates.

SOLUTION: Open the JS file jquery.daterangepicker.js, look for the comment “//custom date range”. From that comment line, go to 7th line. look for:

rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);

Change that with:

rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’);

We remove the triggering of click event on the start date to prevent onClose firing when the start date has been changed.

    <p class="posted"><a href="#commentNumber344">Comment</a> by

James Alvarez on 03/10  at  08:57 AM

<div id="commentNumber345" class="commentEntry">
<p>I am also getting this in IE8/Win7/64

Line: 126
‘this.text’ is null or not an object
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)

Which fails the script (runs in FF ok).

Couldn’t find a solution so far in my search - does anybody have a suggestion?

    <p class="posted"><a href="#commentNumber345">Comment</a> by

Stephen on 03/21  at  03:03 AM

<div id="commentNumber346" class="commentEntry">
<p>If any problems in using it with ASP.NET validations then you may get length is null or not an object. Here is the complete solution for it.

    <p class="posted"><a href="#commentNumber346">Comment</a> by

Praveen Battula on 03/25  at  10:29 PM

<div id="commentNumber347" class="commentEntry">
<p>I was having problems with the Date Range Picker being selected from a UI Dialog which is, when the page is rendered, at the bottom of the page. To fix this I changed the appendTo property as discussed above to the element that was calling the DRP however this now makes the DRP conform to the size of the UI Dialog which is not ideal as the DRP needs a variable width. To fix this problem I reverted the appendTo fix so that the DRP is appended to the body element however I change the showRP function to set the CSS left and top properties like so:

rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

So the function looks like:

function showRP(){
if(’state’) == ‘closed’){
rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());’state’, ‘open’);

I hope this helps some people. Just wanted to share my experience.

    <p class="posted"><a href="#commentNumber347">Comment</a> by

Bazmo on 03/25  at  11:29 PM

<div id="commentNumber348" class="commentEntry">
<p>I’ve got a problem with french accents.

In presets I set specificDate: ‘Date spécifique’.
The menu shows “Date sp?cifique” but the datePicker’s title is correct.

If I set the HTML entity - specificDate: ‘Date spécifique’
It appears correctly in the menu, but the datePicker’s title appears as ‘Date spécifique’

You should change the way you set text in the script.
If you allow the user to display HTML entities, you should replace on line 204
rp.find(’.title-start’).text( options.presets.specificDate )
rp.find(’.title-start’).html( options.presets.specificDate )
(same problem each time the text() function is called)

If you do not allow the user to enter HTML, keep the text() function, but apply the htmlentities() function when you build the menu.

    <p class="posted"><a href="#commentNumber348">Comment</a> by

Raccoon on 03/27  at  10:44 AM

<div id="commentNumber349" class="commentEntry">
<p>woops ...

The third paragraph of my previous comment was :

If I set the HTML entity - specificDate: ‘Date sp&eacute;cifique’
It appears correctly in the menu, but the datePicker’s title appears as ‘Date sp&eacute;cifique’

    <p class="posted"><a href="#commentNumber349">Comment</a> by

Raccoon on 03/27  at  10:46 AM

<div id="commentNumber350" class="commentEntry fg">
<p>@Raccoon: Thanks! Good tip. Hopefully we can get that into the source soon!

    <p class="posted"><a href="#commentNumber350">Comment</a> by

Scott (Filament) on 03/30  at  10:29 AM

<div id="commentNumber351" class="commentEntry">
<p>Try to show march month on this year (2011,2016,2022).

it just show the first five day

    <p class="posted"><a href="#commentNumber351">Comment</a> by

Sami on 03/31  at  02:58 AM

<div id="commentNumber352" class="commentEntry">
<p>Very nice control!

but I notice a scrollbar popping up on the right
... although only for a split second - is this something that can be fixed easily?
otherwise really impressive!

    <p class="posted"><a href="#commentNumber352">Comment</a> by

bitlink web on 03/31  at  01:09 PM

<div id="commentNumber353" class="commentEntry">
<p>... I see that is actually fixed on the example opening in a new page

    <p class="posted"><a href="#commentNumber353">Comment</a> by

bitlink web on 03/31  at  01:11 PM

<div id="commentNumber354" class="commentEntry">
<p>I’ve become a big fan of yours, is is so damn excellent. Thanks for sharing it mate.

    <p class="posted"><a href="#commentNumber354">Comment</a> by

Nauman Akhtar on 04/02  at  03:10 AM

<div id="commentNumber355" class="commentEntry">
<p>hey - still having difficulty making this work with IE7:

Calling via:


in IE fails, with error:
‘this.text’ is null or not an object
daterangepicker.jQuery.js line 125
Code: 0 Char 4

Any help? What is the simple thing I’m missing to make this work for IE as wel? :-(

    <p class="posted"><a href="#commentNumber355">Comment</a> by

Stephen on 04/05  at  02:41 AM

<div id="commentNumber356" class="commentEntry">
<p>How do I remove/disable some of the presets?

    <p class="posted"><a href="#commentNumber356">Comment</a> by

valya on 04/05  at  12:46 PM

<div id="commentNumber357" class="commentEntry">
<p>I tried using this with datepicker 1.8.&nbsp; Doesn’t appear to work.&nbsp; Any idea when it might get updated (or where I might look to fix it myself)?

    <p class="posted"><a href="#commentNumber357">Comment</a> by

Scott on 04/06  at  06:17 PM

<div id="commentNumber358" class="commentEntry">
<p>@Scott I just performed a very quick test with jquery 1.4.2 and jquery-ui 1.8 and all seemed fine.

I didn’t do anything more than replace the references to jquery and jquery-ui in the sample index.html file though.

What specifically have you found to not work with jquery 1.4.2 and jquery-ui 1.8?

    <p class="posted"><a href="#commentNumber358">Comment</a> by

Alex on 04/06  at  10:31 PM

<div id="commentNumber359" class="commentEntry">
<p>It doesn’t do anything.&nbsp; I looked with FB and found a hidden div at the end  of the &lt;body&gt; with an id of “ui-daterangepickercontain”.&nbsp; So, I believe the datepicker code is being called on the right element.&nbsp; However, when I click in the text input box, nothing happens.&nbsp; FB doesn’t report any code errors, missing functions, etc.&nbsp; Just doesn’t do anything.&nbsp; I’m loading jquery 1.42, ui.core, ui.widget, and the 1.8 datepicker (so, not the entire jquery-ui file).&nbsp; I’m calling with the line of code            $("#daterng").val("I’m here").daterangepicker();

The val tells me I’m adding it to the right text box (it didn’t work before I added the val()).  fyi--this text box is in a hidden div initially.  Would that cause a problem?

    <p class="posted"><a href="#commentNumber359">Comment</a> by

Scott on 04/07  at  11:10 AM

<div id="commentNumber360" class="commentEntry">
<p>More information.&nbsp; I happened to try this in Chrome.&nbsp; Now I see the issue.&nbsp; The drop-down list is opening in the wrong place (it was at the very bottom of the page in Chrome).&nbsp; I see the same is true in FF.&nbsp; It was being hidden by FB before.&nbsp; It’s literally opening below the last visible item in the body with a left value of 0px.&nbsp; I suspect it’s computing the location where it should open when I call daterangepicker() and the div it is in is hidden.&nbsp; I’ve seen this before.&nbsp; I would argue that it should be computing the location in the click event just before the class is added to make it visible.&nbsp; So, it appears to not be a 1.8 problem.

    <p class="posted"><a href="#commentNumber360">Comment</a> by

Scott on 04/07  at  03:01 PM

<div id="commentNumber361" class="commentEntry">

On line 181 inside the showRP() function you could include 4 lines like:

if( (typeof settings.posX === “undefined") || settings.posX === null)
rp.parent().css(’left’, rangeInput.offset().left);
if( (typeof settings.posY === “undefined") || settings.posY === null)
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

This will still allow you to override the position with posX and posY if required but will otherwise re-calculate the position when the input is clicked.

    <p class="posted"><a href="#commentNumber361">Comment</a> by

Alex on 04/07  at  10:30 PM

<div id="commentNumber362" class="commentEntry">
<p>I have a small problem. The Calendar is next to flash animation and when maximizing the two calendars, the flash animation covers the calendars.

Now I can reposition the calendar, but its nicer next to the textbox. Is there a way to have the calendar over the flash animation?
Thank you

    <p class="posted"><a href="#commentNumber362">Comment</a> by

Chali on 04/08  at  09:57 AM

<div id="commentNumber363" class="commentEntry">
<p>Solved. Nothing to do with the Calendar. I inserted a parameter in the flash control.

so.addParam("wmode", “opaque");

Thank you anyways

    <p class="posted"><a href="#commentNumber363">Comment</a> by

Chali on 04/08  at  10:24 AM

<div id="commentNumber364" class="commentEntry">
<p>Hi all. Why you call it Range calendar, when the main functionality of application doesn’t work ? At range calendar i can select bigger FROM date then is actual TO date and vice versa.&nbsp; xD Will you repair this BIG BUG ?

    <p class="posted"><a href="#commentNumber364">Comment</a> by

MrHappy on 04/09  at  03:25 AM

<div id="commentNumber365" class="commentEntry">
<p>Hi all.

Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).
I try i.e. as:
alert ($("#range1").daterangepicker()datepickerOptions:{datepicker("getDate")});
but nothing.
Do you can help me?
Big thx.

    <p class="posted"><a href="#commentNumber365">Comment</a> by

Alexey on 04/11  at  12:55 PM

<div id="commentNumber366" class="commentEntry">
<p>This thing is pretty darn cool. Excited to see updates too. Glad you guys used the jQuery themeroller.

    <p class="posted"><a href="#commentNumber366">Comment</a> by

chris on 04/11  at  01:47 PM

<div id="commentNumber367" class="commentEntry">
<p>why don’t use  the positioning with the new position tool ? and replace the wrapping and positioning code with :

//wrap and position
rp.wrap(’<div class="ui-daterangepickercontain"></div>’).parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

And play with posX and posY as offsets ?

    <p class="posted"><a href="#commentNumber367">Comment</a> by

chris on 04/13  at  06:08 PM

<div id="commentNumber368" class="commentEntry">
<p>Just un addon : I  also implement it in the showRP method in order to avoid some browser problems with hidden parents.

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

    <p class="posted"><a href="#commentNumber368">Comment</a> by

chris on 04/13  at  06:14 PM

<div id="commentNumber369" class="commentEntry">
<p>The previous  modification was not so convenient for me because I’m using 2 fields, dedicated to start and end dates. So the rangepicker hid the second field. So I decided to implement a new option called position (as done in ui.tooltip).

The defaults are :
position: {
my: “left top”,
at: “left bottom”,
offset: “0 0”

The code :

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position(jQuery.extend(options.position, {of: rangeInput}));

and near line 285 :
rp.wrap(’<div class="ui-daterangepickercontain"></div>’).parent()
.position(jQuery.extend(options.position, {of: rangeInput}))

So in my code I can now use for example :
position: {
my: “left top”,
at: “right top”,
offset: “2 -70”

With this , the rangepicker now appears at the right top of the start field, with a vertical offset of -70 as shown here :

This could be enhanced for using X/Y positionning (I deleted it in my implementation) and position tool (of course both are exclusive)

    <p class="posted"><a href="#commentNumber369">Comment</a> by

chris on 04/15  at  04:02 PM

<div id="commentNumber370" class="commentEntry">
<p>Is it possible to add custom dates in the form ‘+7 days from selected’ and allow for the user to select a start date?

    <p class="posted"><a href="#commentNumber370">Comment</a> by

sjc on 04/20  at  08:26 AM

<div id="commentNumber371" class="commentEntry">
<p>It’s ok, I’ve worked out how to do it - thanks for a great picker.

    <p class="posted"><a href="#commentNumber371">Comment</a> by

sjc on 04/20  at  09:20 AM

<div id="commentNumber372" class="commentEntry">
<p>Thanks for this great calendar plugin. we are using this in one of our cakephp project.

    <p class="posted"><a href="#commentNumber372">Comment</a> by

neel on 04/23  at  07:44 AM

<div id="commentNumber373" class="commentEntry">
<p>Is there anyway in the range picker to highlight the startdate to the enddate? and also to fly the menu out to the left instead of the right?

Thanks awesome plugin.

    <p class="posted"><a href="#commentNumber373">Comment</a> by

Vince on 04/23  at  09:26 AM

<div id="commentNumber374" class="commentEntry fg">
<p>@Vince: We’re putting together an update with some improvements which will include better collision detection (opening to the left) and restricting first/end date restriction among other things. Highlighting will probably need to happen at the jQuery UI plugin level, whereas this plugin is just a wrapper that extends the UI datepicker’s features, so you might want to discuss that idea on the UI planning wiki.

Thanks - Glad you like!

    <p class="posted"><a href="#commentNumber374">Comment</a> by

Scott (Filament) on 04/23  at  10:05 AM

<div id="commentNumber375" class="commentEntry">
<p>here’s my implementation of first/end restriction

else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){


else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
.datepicker("option", “maxDate”, rp.find(’.range-end’).datepicker(’getDate’));
.datepicker("option", “minDate”, rp.find(’.range-start’).datepicker(’getDate’));

I also implemented the highlight of both end and start date but I don’t have it in my version here.
I’ll post it later.

    <p class="posted"><a href="#commentNumber375">Comment</a> by

chris on 04/23  at  11:44 AM

<div id="commentNumber376" class="commentEntry">
<p>To those having problems on IE 7/8 with the “‘this.text’ is null or not an object” error message, make sure you are properly initializing your options in the presetRanges array, ie:

- Closing and opening brackets
- Proper commas to separate items

I had the same problem because my enumeration had a superfluous comma at the end of my options.

    <p class="posted"><a href="#commentNumber376">Comment</a> by

Shaun on 04/23  at  04:21 PM

<div id="commentNumber377" class="commentEntry">
<p>“superfluous comma at the end of my options”

Thank You! That was exactly it! Just that one comma. You are awesome. Thank you for taking the time to post what might have seemed to be an obvious thing, it wasn’t to me, and the issue is now resolved. Please have an awesome weekend!

    <p class="posted"><a href="#commentNumber377">Comment</a> by

Stephen on 04/23  at  04:35 PM

<div id="commentNumber378" class="commentEntry">
<p>I had this issue once before and took me hours to debug. IE Sucks!

Will never forget that though.

    <p class="posted"><a href="#commentNumber378">Comment</a> by

Vince on 04/24  at  05:39 AM

<div id="commentNumber379" class="commentEntry">
<p>Hi, I would like the date range picker to popup on the left of the field. Is there any way to to this?

Several people asked already but no answer or help has been given to achieve this…

    <p class="posted"><a href="#commentNumber379">Comment</a> by

stephane on 04/27  at  10:35 AM

<div id="commentNumber380" class="commentEntry">
<p>When I enter in a Range of ‘{text: ‘Yesterday’, dateStart: ‘Yesterday’, dateEnd: ‘Yesterday’ }’ I get an unexpected result.&nbsp; I get the date range with splitter of yesterday’s date to today’s date.&nbsp; This seem odd considering the Range of ‘{text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ }’ produces the expected specific date of today.

Can’t seem to figure out why.  Any ideas?

    <p class="posted"><a href="#commentNumber380">Comment</a> by

Jon on 04/28  at  10:10 PM

<div id="commentNumber381" class="commentEntry">
<p>impressive, it’s just that it’s not what i’m looking for.

good work.

    <p class="posted"><a href="#commentNumber381">Comment</a> by

Adam on 04/29  at  09:40 PM

<div id="commentNumber382" class="commentEntry">

I am creating asp site.
I am getting error, Object not supported on
$(function(){ $(’input’).daterangepicker({arrows:true});

this function. I am using visual studio 2008
Any solution

    <p class="posted"><a href="#commentNumber382">Comment</a> by

kunal on 05/05  at  07:19 AM

<div id="commentNumber383" class="commentEntry fg">
<p>@kunal: try scoping your selector to the particular input in inputs you want to convert, rather than every input on the page. It might be trying to convert inputs that aren’t @type=text.

    <p class="posted"><a href="#commentNumber383">Comment</a> by

Scott (Filament) on 05/05  at  08:46 AM

<div id="commentNumber384" class="commentEntry">
<p>I got the sample code to do exactly what I want, but when I point it at a specific control ID I get

“Microsoft JScript runtime error: ‘val()’ is null or not an object”

What is the syntax for this? I assume if I’m only using one picker on a page I don’t need to wrap them in an iFrame, right?

    <p class="posted"><a href="#commentNumber384">Comment</a> by

Josh on 05/05  at  04:51 PM

<div id="commentNumber385" class="commentEntry">
<p>oops, stupid oversight, never mind that last comment from me.

One thing I didn’t see a good solution for yet though is: is there a way to just scale down the calendar’s font size without mucking up the rest of my page? I’m trying to put this in an existing app with it’s own CSS.

    <p class="posted"><a href="#commentNumber385">Comment</a> by

Josh on 05/05  at  06:00 PM

<div id="commentNumber386" class="commentEntry">
<p>Seems my first comment was rejected.

Once more in shortform:

Thanks for the plugin! Really nice one.

For my purposes sadly just a little to much (I dont need no DateRange and DateJS - only the ‘today’, ‘tommory’, ‘specific date’ options and the next, previous day arrows)

I just wanted to mention one little “bug”: when selecting ‘today’, its handled as a range from today till today. Because of that you get for a second “11.05.2010 - 11.05.2010” in the input field. This also happens when you now use the arrows.
Its not really a bug but it just doesnt look nice and I think it will be irritating for the users.

Sorry for my english.
Thanks for all the great things youre doing!


    <p class="posted"><a href="#commentNumber386">Comment</a> by

Sithlord on 05/11  at  08:34 AM

<div id="commentNumber387" class="commentEntry">
<p>For all of you seeing the this.text error in IE7 or 8, I realized that when I edited the custom text in lines 26-36 of the JS file, I must have screwed something up and had a typo somewhere. I reverted it back to the original and now I don’t get any errors!


    <p class="posted"><a href="#commentNumber387">Comment</a> by

Federico Holgado on 05/16  at  08:59 AM

<div id="commentNumber388" class="commentEntry">
<p>Hi All, I have a panel that I hide when I finish with it and then load a different panel (it’s kind of a wizard).

This panel has a daterangepicker defined on it like so:
jQuery_1_3_2(document).bind(’RULE_SHOWN’, function(){
earliestDate: Date.parse(’1/1/2009’),
presetRanges: [
{text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ },
{text: ‘30 days ago’, dateStart: ‘today-30’, dateEnd: ‘today-30’ },
{text: ‘30 days from now’, dateStart: ‘today+30’, dateEnd: ‘today+30’ }
presets: {
specificDate: ‘Select Date’

My problem is that when the panel is no longer shown, I get into an infinite loop of that throws errors like this:
rangeInput.val() is undefined
over and over again…
Do you guys maybe have some idea as to why this happens and how I can fix it? (perhaps by unloading the daterangepicker from the element somehow before it’s hidden?)

    <p class="posted"><a href="#commentNumber388">Comment</a> by

Elad on 05/21  at  01:05 PM

<div id="commentNumber389" class="commentEntry">
<p>This works perfectly on Date Fields on my current page. However when I add a new Date field to the page via javascript datepicker does not work for that new Date field. I have set the class name to datePick using setAttribute in Javascript. Can someone explain how to make the datepicker work with Date Fields added to the page dynamically via Javascript.

    <p class="posted"><a href="#commentNumber389">Comment</a> by

Wayne on 05/25  at  12:16 PM

<div id="commentNumber390" class="commentEntry">
<p>Wayne - look into jQuery .live() to make a jQuery response affect objects injected into the DOM.

    <p class="posted"><a href="#commentNumber390">Comment</a> by

mumu on 06/03  at  12:40 PM

<div id="commentNumber391" class="commentEntry">
<p>daterangepicker do not respect custom dateFormat, when you change order of month/day/year.

If you set dateFormat: eg. Middle/Eastern Europe, the restoration date from input to datapicker is still formated as mm.dd.yy. Change the lines by the line 110 to sth like this:

var iA = ‘today’;
var iB = ‘today’;
if (rangeInput.val().split(options.rangeSplitter).length > 0) {
var iA = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[0].trim());
if (rangeInput.val().split(options.rangeSplitter).length == 2) {
var iB = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[1].trim());

inputDateAtemp = iA;
inputDateBtemp = iB;

    <p class="posted"><a href="#commentNumber391">Comment</a> by

Jaroslav Moravec on 06/10  at  04:27 AM

<div id="commentNumber392" class="commentEntry">
<p>this is the best date time picker yet

It also works gr8 with the new 1.8.2 JQuery ui and the new JQuery 1.4.2.

    <p class="posted"><a href="#commentNumber392">Comment</a> by

roy on 06/12  at  05:50 AM

<div id="commentNumber393" class="commentEntry">

Nice one, I am willing to use this in my webpage but I want that when user clicks on input box only the date range picker should be displayed instead of displaying menu because I want to allow user to set the event start and end date. (an event duration).

Can you please help me out.

Thanks in Advance.

    <p class="posted"><a href="#commentNumber393">Comment</a> by

Muhammad Shoaib on 06/13  at  05:16 AM

<div id="commentNumber394" class="commentEntry">
<p>@Veronika wrote&gt; I’ve tired “onchange” but it doesn’t work ... any ideas?

Fire onChange when widget is closed. Solution rought, but it works.

    <p class="posted"><a href="#commentNumber394">Comment</a> by

SAN on 06/15  at  02:00 PM

<div id="commentNumber395" class="commentEntry">
<p>Is there any way to have the “Specific Date” be based off the current range-end instead of the current range-start? For example, we have a default date range of the past 12-months, but when a user wants a specific day, they are usually looking for a specific day near “today”, not a specific day a year ago.

    <p class="posted"><a href="#commentNumber395">Comment</a> by

Nicholas Calugar on 06/15  at  07:01 PM

<div id="commentNumber396" class="commentEntry">
<p>Yet another ‘Good work/Thank you very much/That’s exactly what I needed’ comment :D

    <p class="posted"><a href="#commentNumber396">Comment</a> by

prodigel on 06/23  at  03:32 AM

<div id="commentNumber397" class="commentEntry">
<p>Thanks for the plugin (very slick)! This would be absolutely perfect if it also supported time ranges. In my application users must select a date range which starts and ends on specific times.

    <p class="posted"><a href="#commentNumber397">Comment</a> by

JasonM on 06/24  at  09:36 AM

<div id="commentNumber398" class="commentEntry">
<p>Hi guys,

it’s too good but
It’s not working with jquery-ui-1.7.2.custom.min.js

plz help .....

    <p class="posted"><a href="#commentNumber398">Comment</a> by

samir on 06/30  at  02:02 AM

<div id="commentNumber399" class="commentEntry">
<p>NiksKniz say: Idea shaking, I support.

{<a href= >cealis

    <p class="posted"><a href="#commentNumber399">Comment</a> by

morsest on 07/02  at  09:31 AM

<div id="commentNumber400" class="commentEntry">
<p>Hi friends how to set default date in date picker text box. i need default date is current month “Month to date” option.

    <p class="posted"><a href="#commentNumber400">Comment</a> by

Rajesh on 07/14  at  01:50 AM

<div id="commentNumber401" class="commentEntry">
<p>Love the plugin!

How can I short-circuit it so that I don’t see presets?  That is, it goes directly to the date range selector?  I just need side-by-side calendars, without the presets…

Anyone have any luck doing this?


    <p class="posted"><a href="#commentNumber401">Comment</a> by

dwenr on 07/17  at  11:10 PM

<div id="commentNumber402" class="commentEntry">

I’ve applied this to two textboxes, and it’s working well. However, I don’t want the menu to pop up when the user click the second i.e. ‘To’ textbox. How can I achieve this?


    <p class="posted"><a href="#commentNumber402">Comment</a> by

karan on 07/19  at  01:25 AM

<div id="commentNumber403" class="commentEntry">
<p>Hi there,

before anything else, thank you very much for this amazing widget, i need to show the daterangepicker clicking in a link or image, is there any way to do this?


doesn work for me, any help?

Thanks in advance.

    <p class="posted"><a href="#commentNumber403">Comment</a> by

Diego Rin on 07/22  at  10:51 AM

<div id="commentNumber404" class="commentEntry">
<p>Firstly, thanks for the amazing widget! I am trying to implement this into the JqueryUI tabs framework, but experiencing a little formatting problem. When selecting the date range, the selector appears outside at the bottom of the tab.

Any advice?


    <p class="posted"><a href="#commentNumber404">Comment</a> by

scott on 07/23  at  10:32 AM

<div id="commentNumber405" class="commentEntry">
<p>The latest version of daterange picker doesn’t work with jquery1.4.2 and jquery-ui 1.8.2. I noticed that this version uses lower jquery and ui versions, wondering if you could update it with the latest jquery? Thanks.

    <p class="posted"><a href="#commentNumber405">Comment</a> by

Jean on 07/23  at  03:37 PM

<div id="commentNumber406" class="commentEntry">
<p>I’ve got it working with jQuery 1.4.2 and jQuery-UI 1.8.2. What isn’t working?

    <p class="posted"><a href="#commentNumber406">Comment</a> by

Nicholas Calugar on 07/23  at  03:48 PM

<div id="commentNumber407" class="commentEntry">
<p>I am using IE7 and struts framework with jquery1.4.2 and ui-1.8.2. Below is a simple jsp file which generates error of “A runtime error has occurred ... Line:29 Error: ‘length’ is null or not an object “

<%@ page language="java" %>
<%@ taglib uri="/taglib/struts-html" prefix="html" %>

‘ >
‘ >
‘ >
<link href="<html:rewrite page="/css/jquery-ui.custom.css"/>" rel="stylesheet" type="text/css">
<link href="<html:rewrite page="/css/ui.daterangepicker.css"/>" rel="stylesheet" type="text/css">



<div id="demoHeader">
<input type="text" value="Choose a Date” id="dateRange" />

    <p class="posted"><a href="#commentNumber407">Comment</a> by

Jean on 07/26  at  12:19 PM

<div id="commentNumber408" class="commentEntry">
<p>Where is jQuery and the daterangepicker javascript included? The output in the browser would be much more useful...struts code is on the backend and has nothing to do with JS functionality. Do you have this on a page we could look at?

    <p class="posted"><a href="#commentNumber408">Comment</a> by

Nicholas Calugar on 07/26  at  12:33 PM

<div id="commentNumber409" class="commentEntry">
<p>Thank you for your reply and the browser’s source is below,


<link href="/css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<link href="/css/ui.daterangepicker.css" rel="stylesheet" type="text/css">



<div id="demoHeader">
<input type="text" value="Choose a Date” id="dateRange" />

    <p class="posted"><a href="#commentNumber409">Comment</a> by

Jean on 07/27  at  09:33 AM

<div id="commentNumber410" class="commentEntry">
<p>It must be cutting out your script tags...could you post the browser source to <a href="" rel="nofollow"></a> and then put the URL to the pastebin in a comment here?

    <p class="posted"><a href="#commentNumber410">Comment</a> by

Nicholas Calugar on 07/27  at  10:37 AM

<div id="commentNumber411" class="commentEntry">
<p>Sorry to cause this much trouble, I posted it to pastebin and the link to it is below:


    <p class="posted"><a href="#commentNumber411">Comment</a> by

Jean on 07/27  at  04:53 PM

<div id="commentNumber412" class="commentEntry">
<p>No problem...I took your source, substituted the paths to my JS and CSS files and it worked fine. Try taking out the script tag for calendar.jsp - not sure what that is and it’s not required. Also, verify that your browser can actually browse to the CSS and JS might have a typo in one of the paths.

Here is the code that is working for me:

    <p class="posted"><a href="#commentNumber412">Comment</a> by

Nicholas Calugar on 07/27  at  05:14 PM

<div id="commentNumber413" class="commentEntry">
<p>any one can tell me how to enable drop list for year and month as shown in demo??

any help would be appreciated

    <p class="posted"><a href="#commentNumber413">Comment</a> by

Rashid on 08/03  at  06:20 AM

<div id="commentNumber414" class="commentEntry">
<p>it would be great to have it on github!

    <p class="posted"><a href="#commentNumber414">Comment</a> by

tom on 08/04  at  03:00 PM

<div id="commentNumber415" class="commentEntry">
<p>The rangepicker won’t work properly on a modal box, it appears in a different position rather than relatively showing under the textbox being clicked for the date input. Also it shows under the modal box and not over it. It has something to do with the z-index.

I tried a temporary fix by changing the z-index into 9999 but again, the problem is the position where it shows up.

I’m not a JQuery expert. Can anyone suggest some solution for this?

I read a same previously by Wade0 but the solution suggested is just to change the PosX and PosY, unfortunately, I don’t know how to set this dynamically relative to the inputbox being clicked.

    <p class="posted"><a href="#commentNumber415">Comment</a> by

Danny on 08/05  at  10:24 PM

<div id="commentNumber416" class="commentEntry">
<p>I’ve got problem with localisation of this datepicker. Language was unchanged (English) before first click on the date. Is it any way to make it work right - got date in my language (polish) before any user could see it?

    <p class="posted"><a href="#commentNumber416">Comment</a> by

VizjereiX on 08/06  at  02:13 AM

<div id="commentNumber417" class="commentEntry">
<p>Thank you for this tool!

Is there a way to use a button instead of an input field?


    <p class="posted"><a href="#commentNumber417">Comment</a> by

Murphy on 08/10  at  05:38 PM

<div id="commentNumber418" class="commentEntry">
<p>I found a solution, but I think I also found a bug.

Instead of text inputs, I had been trying to use hidden inputs, image inputs, and even divs. My intent was to then get the “value” attribute of those objects with a function called by daterangepickers’s onClose event.

For example:

myOnClose = function() {
var rangeA_value = document.getElementById(’rangeA’).value;
var rangeB_value = document.getElementById(’rangeB’).value;
// do stuff with range here

What happens with this, however, is that when selecting an option with the same start and end range (e.g., Today or Yesterday), rangeB_value is set to the prior value. I found that this was still happening when using normal text fields, even though the rendered text fields were showing the correct value.

Something similar happens when only using one input. The actual text field is updated correctly, but when trying to access it’s value from JavaScript, it takes the form of “Range A to Range B” where Range B is the previous set value.

I found the following fix (works in FF, Safari and IE):

myOnClose = function() {
function myOnClose_delayed = function() {
var rangeA_value = document.getElementById(’rangeA’).value;
var rangeB_value = document.getElementById(’rangeB’).value;
// do stuff with range here

For whatever reason, a timeout of even 0 milliseconds allows the correct value to be set. I originally tried the timeout because I thought perhaps onClose was being called to quickly, but maybe it has to do with separating a direct reference rather than timing?

Regardless, this is working. I can now create multiple elements to use with Date Range Picker: the first two are hidden elements, and subsequent ones are buttons (this did require changing “...if(rangeInput.length == 2)...” in the datepickerOptions method to “...(rangeInput.length > 1)...” in daterangepicker.jQuery.js), then processing the results with a timed-out onClose script.

    <p class="posted"><a href="#commentNumber418">Comment</a> by

Murphy on 08/10  at  07:22 PM

<div id="commentNumber419" class="commentEntry">
<p>Hey - great work - to those who are having issues setting a Minimum or Maximum date (earliestDate, latestDate) - you are probably setting it how I initially thought i was supposed to - however we must remember that this is based off of the jQuery UI Date range picker, in order to limit the calendar, we must also pass options to that plugin - please see below for sample instantiation code:

presetRanges: custom_datepicker_menu,
earliestDate: Date.parse(’2010-07-01’),
datepickerOptions: {minDate: Date.parse(’2010-07-01’)
maxDate: Date.parse(’Today’)}

    <p class="posted"><a href="#commentNumber419">Comment</a> by

Nick on 08/13  at  12:48 PM

<div id="commentNumber420" class="commentEntry">
<p>I have the same question as Mastyf. Is it possible to change the first day of week for the range calendars from the webpage using it? I saw Tiffanys answer above but since I sure suck as javascript/jQuery I couldn’t figure out where to put that line of code.

It would be nice if you just could change the language code from en-US to whatever you wanted and have it change the look of the calendar, but just defining the first day of the week would also help.

    <p class="posted"><a href="#commentNumber420">Comment</a> by

LennyPain on 08/14  at  05:51 PM

<div id="commentNumber421" class="commentEntry">

Hi lenny,
changing the first day of week is very simple,set a value to firstDay option in datepickeroptions like this:

$(’#myinput’).daterangepicker( { datepickerOptions: { firstDay: 1} } );

This will set the first day of week to Monday,days of week are zero-index;

    <p class="posted"><a href="#commentNumber421">Comment</a> by

alaa9jo on 08/16  at  02:45 AM

<div id="commentNumber422" class="commentEntry">
<p>Excellent! Now it’s working like a charm. Thank you for your help!

    <p class="posted"><a href="#commentNumber422">Comment</a> by

LennyPain on 08/16  at  11:55 AM

<div id="commentNumber423" class="commentEntry">
<p>I really like your Date range picker. but I tried the earliest date and latest date is not working. i have situation. they should not pick earlier date and also they can select after current date. ( Ex : 06/01/2010 should  be earliest date) they can’t able to pick earlier than that date.

    <p class="posted"><a href="#commentNumber423">Comment</a> by

Johngi on 08/17  at  06:26 PM

<div id="commentNumber424" class="commentEntry">
<p>Hello friends,

I have tried to implement date range picker control. You can get the code at this link

Please suggest me to make it more better.

Mohan Prajapati

    <p class="posted"><a href="#commentNumber424">Comment</a> by

Mohan on 09/03  at  05:33 AM

<div id="commentNumber425" class="commentEntry">
<p>Two questions ?

1.  in case of selecting date range. Can the dates before the start date be greyed out for the selection of end date?

2. how can the left pane disabled for date range selection?

    <p class="posted"><a href="#commentNumber425">Comment</a> by

Kumar Saurav on 09/07  at  04:22 AM

<div id="commentNumber426" class="commentEntry">
<p>FG doesn’t seem very interested in fixing this but I feel that I’ve come up with a more proper fix for the onClose bug.

First off the concept of HIDING the rangepicker (RP) is not and should not be the same as the concept of CLOSING the RP.

Close should indicate that all work within the RP is completed and all values have been finalized.

Hide should do nothing other than change the RP’s visibility.

Based on those definitions, a proper close event will occur when either the ‘Done’ button has been clicked or after the ‘.range-end’ datepicker (DP) has been set with the ‘closeOnSelect’ option set to true.

Simply clicking away from the RP to hide it while it is shown should not guarantee that any values that have been changed should be committed. Without clicking ‘Done’ and without ‘closeOnSelect’ set to true, clicking away from the RP should do nothing more than hide the RP.

Lastly, in its current configuration, the DP onSelect handler triggers the RP’s onChange handler AFTER it triggers onClose. This doesn’t make much sense to me at all. No further events should occur after the close event.

Based on those rules, I made my changes to daterangepicker.jQuery.js. The modified version is available here -

    <p class="posted"><a href="#commentNumber426">Comment</a> by

IYS on 09/09  at  05:23 PM

<div id="commentNumber427" class="commentEntry">
<p>Hey guys just wanted to let you know an easy way to make the Instance management work with more than one date range widget on a screen. All you need to do is wrap your inputs with a span class:

<span class="date_range_wrapper">
<input name="date1" class="date_range">
<input name="date2" class="date_range">

then modify the onClick event in the pluggin

//calls parent so we can have more than one picker on the screen
rangeInput = jQuery(this).parent().find("input"); //calls wrapped inputs
return false;

    <p class="posted"><a href="#commentNumber427">Comment</a> by

Darren on 09/09  at  05:40 PM

<div id="commentNumber428" class="commentEntry">
<p>If you are using i18n you will need to do something like this to make the calendar work with other languages. You of course need to add the jquery i18n js file for other languages

dateFormat:"MM dd yyyy”,
datepickerOptions: $j.extend({},
$j.datepicker.regional[’de’], { //germany
showStatus: true, //this is just a datepicker option
showOn: “both”,//this is just a datepicker option
changeYear :true//this is just a datepicker option

    <p class="posted"><a href="#commentNumber428">Comment</a> by

Darren on 09/09  at  05:44 PM

<div id="commentNumber429" class="commentEntry">
<p>I might sugges you change the event type from click to jQuery(this).bind("click focus”,function(){… to make visible

    <p class="posted"><a href="#commentNumber429">Comment</a> by

Darren on 09/10  at  03:43 PM

<div id="commentNumber430" class="commentEntry">

I’m currently using your plugin and I have some troubles with one particular issue. Try to do that:

- Go to your working demo end click on the input field
- Select a date (9/15/2010) with specific datepicker
- Click on the input field and change manually the date (with your keyboard without using the datepicker) to 9/9/2010
- Click outside to close the widget
- Reclick on the input field and go to the specific datepicker

At that point I expect to see the manually entered date to be selected on the datepicker widget. What do you think? And how to do that on your extension?

Please note that this functionality is implemented in the original UI.datepicker ;)


    <p class="posted"><a href="#commentNumber430">Comment</a> by

Roberto Ortelli on 09/13  at  02:30 AM

<div id="commentNumber431" class="commentEntry">

I am a newbie to the JQ world and so far I LOVE IT! I really like the datepicker code you set up, but is there someone who can share the code for this with me?

    <p class="posted"><a href="#commentNumber431">Comment</a> by

Marsil on 09/14  at  01:59 PM

<div id="commentNumber432" class="commentEntry">
<p>First of all this is a very very nice plugin for jquery.

I have one specific situation with my webpage and Im posting a solution which Im sure someone will find handy. It is a form with various buttons for various tasks and everything was done in the background via $.ajax and POST.

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="” />

I found out that once I changed the value of date field like this:

var datum = some calculated value;

The datepicker wont highlight start and end date nor the arrows for previous and next work. Also, it doesn’t highlght start and end date even if You set the date on input field through HTML:

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="01-Aug-2010 to 31-Aug-2010” />

It also doesn’t work when You pick one of the presets. For example You pick previous month, it populates input field correctly, but when You click on input field again, start and end date aren’t highlighted.

That problem bugged me for more then 10 hours and I finally solved it.
First of all I added a change trigger after setting the value fo input field dynamically like this:


My daterangepicker initialization (I have more optmized version of this, fewer lines, but I intentionally write it like this for better understanding):

dateFormat: ‘d-M-yy’,
rangeSplitter: ‘to’,
datepickerOptions: {changeMonth: true, changeYear: true},
onChange: function() {
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
datumopseg[0] = new Date();
if (datumopseg[1] == “")
datumopseg[1] = new Date();
onOpen: function(){
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
datumopseg[0] = new Date();
if (datumopseg[1] == “")
datumopseg[1] = new Date();

Now, everything is working as I wanted, start and end date are always highlighted with the proper values from input field.


    <p class="posted"><a href="#commentNumber432">Comment</a> by

Bosko on 09/16  at  06:56 PM

<div id="commentNumber433" class="commentEntry">
<p>I posted uncomplete solution, this part is slightly corrected:

onChange: function() {
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
datumopseg[0] = new Date();
if ((datumopseg[1] == “") || (datumopseg[1] == undefined))
datumopseg[1] = new Date();
onOpen: function(){
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
datumopseg[0] = new Date();
if ((datumopseg[1] == “") || (datumopseg[1] == undefined))
datumopseg[1] = new Date();


    <p class="posted"><a href="#commentNumber433">Comment</a> by

Bosko on 09/16  at  07:11 PM

<div id="commentNumber434" class="commentEntry">
<p>Looks great in IE8, but IE9 beta doesn’t seem to render the corners...I’m using the same .ui-corner-X classes on some of my clients sites and they are rendering in IE9, for what its worth. I’m sure they’ll make change to IE9 before its released. BTW, Chrome makes the fg site come alive in most examples. Thanks for this one! (I didn’t read all the comments so if this is redundant you can consider it confirmation)

    <p class="posted"><a href="#commentNumber434">Comment</a> by

Observative on 09/23  at  11:58 PM

<div id="commentNumber435" class="commentEntry">
<p>Nice Project! But there’s a bug in daterangepicker.jQuery.js on line 145.

All activated dates will be removed with this line:


This has to change, because activated dates in the calendar may not be removed: Change to:


Regards Jens N.

    <p class="posted"><a href="#commentNumber435">Comment</a> by

Jens Neumann on 09/29  at  03:16 AM

<div id="commentNumber436" class="commentEntry">
<p>Very nice and easy to customize, however I’m having trouble using the value.

Also, I was not able to use it as an iframe. The format was conflicting with other functions; seems too difficult without instructions for setting up the anchor tag with class="iframe" (I guess), something I’m not familiar with.

Form using:

<input type="text" value="today" id="range_a">

Then on the database request:

$DateRange = $_GET[’range_a’];
$Dates = explode(” - “ , $DateRange);
$DateStart = (date("U" , strtotime($Dates[0]))*1000); // need UTC in ms
$DateEnd = (date("U" , strtotime($Dates[1]))*1000); // need UTC in ms

This gives me nothing (it seems), but if I hard code a value for $DateRange= the database script executes.

This is on an AJAX request form that has other variables passed the same way, and they are working.


    <p class="posted"><a href="#commentNumber436">Comment</a> by

C S R on 09/29  at  03:39 PM

<div id="commentNumber437" class="commentEntry">
<p>Can anyone tell me how to integrate time to this such a cool plug-in?

    <p class="posted"><a href="#commentNumber437">Comment</a> by

beeko on 10/01  at  09:13 PM

<div id="commentNumber438" class="commentEntry">
<p>Great plugin!

One problem: is works great for one date range, but when I put 2 date ranges ( 2 fuctions), I get “Error: ‘offset().left’ is null or not an object”..
Can you help..?

    <p class="posted"><a href="#commentNumber438">Comment</a> by

eyalec on 10/03  at  08:00 AM

<div id="commentNumber439" class="commentEntry">
<p>Disregard that. I was using server textboxes…

It works great! thx.

    <p class="posted"><a href="#commentNumber439">Comment</a> by

eyalec on 10/03  at  08:21 AM

<div id="commentNumber440" class="commentEntry">
<p>A little hack to select date range by default and mark the input dates as selectable:

First change: restoreDateFromData

jQuery.fn.restoreDateFromData = function( first ){
jQuery(this).datepicker(’setDate’, jQuery(this).data(’saveDate’)).removeData(’saveDate’);
jQuery(this).datepicker(’setDate’, first?inputDateA:inputDateB);
return this;

Second change: showRP

function showRP(){
if(’state’) == ‘closed’){’state’, ‘open’);

Third change: clickActions

jQuery.fn.clickActions = function(rp, rpPickers, doneBtn){
rp.find(’.title-start’).text( options.presets.specificDate );
setTimeout(function(){doneBtn.fadeIn();}, 400);
else if(jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)){
rp.find(’.title-end’).text( options.presets.allDatesBefore );
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
else if(jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)){
rp.find(’.title-start’).text( options.presets.allDatesAfter );
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
setTimeout(function(){doneBtn.fadeIn();}, 400);
else {
//custom date range
rp.find(’.range-start, .range-end’).hide(400, function(){
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) : jQuery(this).data(’dateStart’)();
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’)();
rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);
rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’).trigger(’click’);
return false;

That did the job for me ^^.

    <p class="posted"><a href="#commentNumber440">Comment</a> by

Aldo_MX on 10/05  at  11:40 AM

<div id="commentNumber441" class="commentEntry">
<p>*mark the input dates as selected (sorry)

    <p class="posted"><a href="#commentNumber441">Comment</a> by

Aldo_MX on 10/05  at  11:41 AM

<div id="commentNumber442" class="commentEntry">
<p>Tue, 5 Oct 2010.

I ran into a problem with IE8 not initializing the daterangepicker.
This was the this error:

Message: ‘this.text’ is null or not an object
Line: 145
Char: 4
Code: 0
URI: js/daterangepicker.jQuery.js

After a little debugging i found that one of the object strings was undefined and thus causing the error.

So here is my work around. I added an if statement to check for the “undefined” string and ignore it.

(Original code)
//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function(){
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)

(New code)
//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function(){
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);

if(this.text != undefined){
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)

I hope that it helps someone else!!


    <p class="posted"><a href="#commentNumber442">Comment</a> by

Gray on 10/05  at  03:29 PM

<div id="commentNumber443" class="commentEntry">
<p>I’m currently working on a site for a client of mine, and I’m trying to implement a date range picker like that on Google Adwords where the picker updates a control listing the range name and the dates picked (eg, Last 7 days: 01/10/2010 to 07/10/2010).&nbsp; Is there a way to hang this date range picker off a div instead of an input field?

    <p class="posted"><a href="#commentNumber443">Comment</a> by

Benjamin Nolan on 10/08  at  06:05 AM

<div id="commentNumber444" class="commentEntry">
<p>Hmm… OK, the tab order on this form is not what I was expecting it to be…

The comment above was supposed to be as follows:

I’m currently working on a site for a client of mine, and I’m trying to implement a date range picker like that on Google Adwords where the picker updates a control listing the range name and the dates picked (eg, Last 7 days: 1st October, 2010 to 7th October, 2010).  Is there a way to hang this date range picker off of a div for example instead of an input field but still have the plugin automatically update a hidden input field and use onChange to update the content of the div with the formatted dates?

    <p class="posted"><a href="#commentNumber444">Comment</a> by

Benjamin Nolan on 10/08  at  06:07 AM

<div id="commentNumber445" class="commentEntry">

I’d like to set a maxDate and minDate for dateRange preset.
I am trying to put values through datepickerOptions but it doesn’t work.
Does someone know how to do that ?

    <p class="posted"><a href="#commentNumber445">Comment</a> by

ginnn on 10/18  at  10:50 AM

<div id="commentNumber446" class="commentEntry">
<p>I tried this in var datepickerOptions :

rp.find(’.range-end’).datepicker(’option’, ‘maxDate’ ,’+0d’ );
rp.find(’.range-end’).datepicker(’option’, ‘minDate’ ,’-2m’ );
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’ ,’+0d’ );
rp.find(’.range-start’).datepicker(’option’, ‘minDate’ ,’-2m’ );

but i cant select date now....

    <p class="posted"><a href="#commentNumber446">Comment</a> by

ginnn on 10/18  at  11:24 AM

<div id="commentNumber447" class="commentEntry">
<p>Is there a way to set the max date range dynamically?

    <p class="posted"><a href="#commentNumber447">Comment</a> by

Josh on 10/23  at  02:04 PM

<div id="commentNumber448" class="commentEntry">
<p>Im facing a particular problem here is the code

<link href="../../../../Content/ui.daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" title="ui-theme"
type="text/css" />

$(function () {
$(’#rangeA’).daterangepicker({ presetRanges: [{ text: ‘My Range’, dateStart: ‘Today’, dateEnd: ‘Today’}] });

<input type="text" value="4/23/99" id="rangeA" />

im getting object dosen’t support property or method at the line below
var rpPickers = jQuery(’<div class="ranges ui-widget-header ui-corner-all ui-helper-clearfix"><div class="range-start"><span class="title-start">Start Date</span></div><div class="range-end"><span class="title-end">End Date</span></div></div>’).appendTo(rp);
rpPickers.find(’.range-start, .range-end’).datepicker(options.datepickerOptions);

    <p class="posted"><a href="#commentNumber448">Comment</a> by

rakesh on 10/26  at  02:38 AM

<div id="commentNumber449" class="commentEntry">
<p>Arrgh - using the datepicker on the second (originally hidden) tab of JQuery-UI-tabs - and the date picker won’t show up - I think it’s putting it on the first (now hidden) tab.

Is there a solution to this? (please!)

    <p class="posted"><a href="#commentNumber449">Comment</a> by

Canadaboy on 10/26  at  02:52 AM

<div id="commentNumber450" class="commentEntry">
<p>ok - found the solution above with some testing (which is great because js is NOT my forte - to fix and allow date picker to show up on jquery ui tabs (second and other tabs) - modify the daterangepicker.jQuery.js file as follows:

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});
if(’state’) == ‘closed’){’state’, ‘open’);

What we are doing is adding the following line:
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

    <p class="posted"><a href="#commentNumber450">Comment</a> by

Canadaboy on 10/26  at  03:55 AM

<div id="commentNumber451" class="commentEntry">
<p>Very good if the next version support :

- French translation or Change Days / Months in other language

    <p class="posted"><a href="#commentNumber451">Comment</a> by

basur on 11/02  at  04:09 AM

<div id="commentNumber452" class="commentEntry">
<p>In the calender, there are year dropdownlist shown but i found out the latest year shown goes until 2025.

What should I do if i want to change the year shown in the year dropdownlist?
For example, the range is between 1900 to 2010 only.

    <p class="posted"><a href="#commentNumber452">Comment</a> by

DEN on 11/03  at  04:11 AM

<div id="commentNumber453" class="commentEntry">
<p>I have updated your plugin for an application I am developing, where the user must be limited to a certain number of days from the start or end date they select.&nbsp; The parameter is “daysInRange”.&nbsp; We must limit the user’s choice to a 90-day period, for instance, upon a user selecting Jan 1, 2010, the last day that is enabled in the picker for “end date” is April 1, 2010.&nbsp; When they adjust either date, it updates the specified date range period.

Let me know if you think you would like to add this feature to your plugin, and I’ll pass the code along to you.

    <p class="posted"><a href="#commentNumber453">Comment</a> by

Samuel Brasington on 11/17  at  01:41 PM

<div id="commentNumber454" class="commentEntry">
<p>No problems implementing this plugin, but my boss says our users won’t know what to do if there isn’t a calendar image to click on. Anyone know how I can place an image next to the form field and open the datepicker when the image is clicked on?

    <p class="posted"><a href="#commentNumber454">Comment</a> by

Todd Ryks on 11/17  at  06:51 PM

<div id="commentNumber455" class="commentEntry">
<p>Doesn’t work in Opera 10 with jQuery 1.4.4 :(

This is the latest to date.

    <p class="posted"><a href="#commentNumber455">Comment</a> by

SAN on 11/19  at  02:29 AM

<div id="commentNumber456" class="commentEntry">
<p>I really like your plugin, but was wondering about non-sequential date picking.&nbsp; Any ideas where to start to implement something like this?

    <p class="posted"><a href="#commentNumber456">Comment</a> by

Chris on 11/22  at  03:54 PM

<div id="commentNumber457" class="commentEntry">
<p>@Todd Ryks: just add a calendar icon next to the textbox, and copy the event from the datepicker to that image. I used the CopyEvent plugin, like this:


Also, if you *don’t* want the calendar to open up by clicking the textbox, just remove the events :


    <p class="posted"><a href="#commentNumber457">Comment</a> by

Shaun on 11/24  at  12:04 PM

<div id="commentNumber458" class="commentEntry">
<p>Hi there! i’m implementing this plugin on a php form using the arrows option. How can i set an initial date when form loads to work with arrows?

    <p class="posted"><a href="#commentNumber458">Comment</a> by

davidv on 11/29  at  04:36 AM

<div id="commentNumber459" class="commentEntry">
<p><a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber459">Comment</a> by

guest on 11/30  at  07:38 AM

<div id="commentNumber460" class="commentEntry">
<p>Hi all.

Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).

    <p class="posted"><a href="#commentNumber460">Comment</a> by

sigara bırakma on 12/01  at  06:00 AM

<div id="commentNumber461" class="commentEntry">
<p>How can I set the input value to the current date when the page loads? Rather then having text saying select date etc i’d like it to be the current date, or a selected date range when the page loads?


    <p class="posted"><a href="#commentNumber461">Comment</a> by

Pete on 12/07  at  06:05 AM

<div id="commentNumber462" class="commentEntry">
<p>I apologize if this is a dumb question, but I cannot seem to figure this out. Is there a function call to get the current date string from the daterangepicker object?

    <p class="posted"><a href="#commentNumber462">Comment</a> by

John on 12/09  at  09:11 PM

<div id="commentNumber463" class="commentEntry">
<p>I found a problem when using JQuery UI 1.8.7.

there is a problem there that the calender dont show because in the jquery ui css file, the datepicker class called “.ui-datepicker” have a property of “display:none”

i made a little hack to fix it by changing the plugin js file

function showRP() {
if (’state’) == ‘closed’) {’state’, ‘open’);
rp.find(”.ui-datepicker").css("display", “inline-block"); //Changed by Daniel
function hideRP() {
if (’state’) == ‘open’) {’state’, ‘closed’);
rp.find(”.ui-datepicker").css("display", “none"); //Changed by Daniel

hope thats help

    <p class="posted"><a href="#commentNumber463">Comment</a> by

Daniel Jaffe on 12/16  at  11:26 AM

<div id="commentNumber464" class="commentEntry">
<p>Hi, i want to open the datarange picker with an img next to the input? any ideas?

i try this:

$("#form .items img").css({cursor: “pointer"}).click(function(){ $(this).prev().click().focus();});

but the datarangepicker fadein and fadeout.


    <p class="posted"><a href="#commentNumber464">Comment</a> by

Arnold Roa on 12/27  at  06:23 PM

<div id="commentNumber465" class="commentEntry">
<p>Sexy. This made my evening, Thank You!

    <p class="posted"><a href="#commentNumber465">Comment</a> by

Christopher on 12/27  at  08:43 PM

<div id="commentNumber466" class="commentEntry">
<p>Thanks a bunch Daniel Jaffe, you saved my butt on this one!

    <p class="posted"><a href="#commentNumber466">Comment</a> by

Tyler Eckberg on 12/29  at  05:43 PM

<div id="commentNumber467" class="commentEntry">
<p>2 events are sent on change.

But first raised event cannot see second value, so there is 2 onchange calls and first uses wrong (previous one indeed) end date.
I fix by separate set values and THEN raise events.
Then i think first event could be ignored to get only one call !

//Set values first, then raise events
var ds = rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’);
var de = rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’);
//ds.trigger(’click’);// enough

    <p class="posted"><a href="#commentNumber467">Comment</a> by

LudoO on 01/19  at  05:42 AM

<div id="commentNumber468" class="commentEntry">

It would be nice if it’s possible that the result of date selection ‘Today’, actually shows ‘Today’ in the text field. Then users can store the url and always see the stats of today (?date=today). Now the browser will remember the actual date you have picked.

    <p class="posted"><a href="#commentNumber468">Comment</a> by

Richard Korebrits on 01/21  at  04:39 AM

<div id="commentNumber469" class="commentEntry">
<p>Has anyone attempted to incorporate the time add-on from the Trent Richardson, <a href="" rel="nofollow"></a>, with this daterange picker?

    <p class="posted"><a href="#commentNumber469">Comment</a> by

John on 01/25  at  02:15 PM

<div id="commentNumber470" class="commentEntry">
<p>I recently updated my custom theme css from jquery-ui-1.8.7.custom.css to jquery-ui-1.8.8.custom.css. Now I the date picker calendars don’t appear. For example if I click on the “Specific Date” option I see the area where the calendar is supposed to be but it only says “Specific Date” and then shows the “Done” button. I can’t think of a reason why the css file would be the problem but that’s the only file that has changed in the last 2 weeks. Any thoughts? Thanks.

    <p class="posted"><a href="#commentNumber470">Comment</a> by

Todd on 01/26  at  01:29 PM

<div id="commentNumber471" class="commentEntry">
<p>Same problem as Todd. It works in Firefox but ot in IE, Chrome or Safari. Using jquery-ui-1.8.9

    <p class="posted"><a href="#commentNumber471">Comment</a> by

Rodrigo on 02/03  at  03:45 AM

<div id="commentNumber472" class="commentEntry">
<p>How to make the date picker align to the bottom right of your element instead of bottom left, assuming your date picker was initialized with an element called “input#date”:

var dc=$("input#date").daterangepicker(/*your opts here*/);
var right=($(window).width()-dc.offset().left-dc.width());//calc distance from right side of screen
$(".ui-daterangepickercontain").css( {’left’:’auto’,’right’:right+’px’} );

    <p class="posted"><a href="#commentNumber472">Comment</a> by

steve on 02/03  at  05:36 AM

<div id="commentNumber473" class="commentEntry">
<p>Rodrigo, I wanted to let you know I just upgraded to 1.8.9 and I’m still having the same problems. I wish I had my 1.8.7 files.

    <p class="posted"><a href="#commentNumber473">Comment</a> by

Todd on 02/03  at  10:52 AM

<div id="commentNumber474" class="commentEntry">
<p>I’ve got the same problem with the upgrade to jQuery-UI 1.8.9.

I finally came up with a temporary fix. You can download it here : (see file js/ )

The reason is that in jQuery UI 1.8.9 (or 1.8.8 ?), datepicker has a new behavior. In CSS, “ui-datepicker” is now marked as “display:none”. jQuery-UI builds the whole datepicker, then call show() to display it. This normally overrides the css display by a new style="display:block" attribute.

But Date Range Picker tries to build a datepicker on an element before appending it to the document. As the element is not attached to the document, the browser may not know which sylesheet has to be applied on it. IE and Chrome do not see correctly the “display:none” line from CSS, so jQuery thinks that the element is visible, and show() function will not add the style="display:block" attribute.
This happens because jQuery show() function calls window.getComputedStyle, which does not work the same on all browsers.

A simple fix on Date Range Picker is to append the datepicker’s element to the document before calling datepicker(). That is what I did, and it seems to work good now.

    <p class="posted"><a href="#commentNumber474">Comment</a> by

Etienne Coumont on 02/06  at  06:03 AM

<div id="commentNumber475" class="commentEntry">
<p>I tried to use it with jquery 1.5 and ui 1.8.9 and doesnt work properly. it does not shown the control and there is no javascript error thrown. I ve seen the example but dont know whats different. by the way great job.!!

    <p class="posted"><a href="#commentNumber475">Comment</a> by

carlos on 02/09  at  02:59 AM

<div id="commentNumber476" class="commentEntry">
<p>Sorry to ask, but how do I read each date separately?

Do I have to date the full range from input box and parse from it?

or is there any function to do so. What I need is


or something smiler.

    <p class="posted"><a href="#commentNumber476">Comment</a> by

Shurid on 02/15  at  10:19 AM

<div id="commentNumber477" class="commentEntry">
<p>Very good contribution for web developer !!

But In IE-8, I faced may problem in event handler functions. onClose, onChange is not worked :(

So please help me for this.

    <p class="posted"><a href="#commentNumber477">Comment</a> by

Haresh Vidja on 02/16  at  12:12 AM

<div id="commentNumber478" class="commentEntry">
<p>There is a bug. Even in demo on this site.

If you click “Specific Date”, and will not to choose the date, then click “All dates before” and click “Specific Date” again, current year is changed to 1996.

Waiting for the fix :)

Tested: Google Chrome 9.0.597.98, FireFox 3.6.13

    <p class="posted"><a href="#commentNumber478">Comment</a> by

Alex on 02/21  at  12:40 PM

<div id="commentNumber479" class="commentEntry">

i would like to have only the Date Range option by default
so what I mean to say is when I click on the text box and date-picker menu pops up I should see only Date Range option by default and not the other options.

    <p class="posted"><a href="#commentNumber479">Comment</a> by

Reshab on 02/25  at  11:25 PM

<div id="commentNumber480" class="commentEntry">

I am using 1.4.2 version of JQuery Theme roller, which has simple datepicker. How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page.


    <p class="posted"><a href="#commentNumber480">Comment</a> by

Vikrant on 03/03  at  04:43 PM

<div id="commentNumber481" class="commentEntry">

You can customize your Theme from left panel settings in Roller from

After customizing Download Theme Roller and extract it in your project directory and replace or apply customized css file path in your html code. then Datepicker automatically take your customized CSS style.. :)


    <p class="posted"><a href="#commentNumber481">Comment</a> by

Haresh on 03/04  at  02:26 AM

<div id="commentNumber482" class="commentEntry">
<p>If I use presets: with presetRanges: option I got the missing function error, so I just don’t use the presets: option any more.

Great work!

    <p class="posted"><a href="#commentNumber482">Comment</a> by

Gudata on 03/07  at  11:33 AM

<div id="commentNumber483" class="commentEntry">
<p>onChange function call triggers one or two time. Normally i need onchange function to trigger one time. This is serious error please get through it. Say me a temrory solution to solve this onChange function call problem

    <p class="posted"><a href="#commentNumber483">Comment</a> by

Mohan Ram on 03/09  at  01:08 AM

<div id="commentNumber484" class="commentEntry">
<p>Hi Mohan Ram

Simply You have to use onClose function… because I also faced this problem ;)

    <p class="posted"><a href="#commentNumber484">Comment</a> by

Haresh on 03/09  at  04:25 AM

<div id="commentNumber485" class="commentEntry">
<p>Disadv of using onClose function

While using previous and next button i cant trigger function [Whenever changes occurs i need to trigger a function] Say me a simple possibility

    <p class="posted"><a href="#commentNumber485">Comment</a> by

staytouch on 03/09  at  04:31 AM

<div id="commentNumber486" class="commentEntry">
<p>@Etienne Thanks dude..&nbsp; Was banging my head on the keyboard for awhile on that one!

    <p class="posted"><a href="#commentNumber486">Comment</a> by

Paul Vernon on 03/09  at  11:57 AM

<div id="commentNumber487" class="commentEntry">
<p>How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page same qustion

    <p class="posted"><a href="#commentNumber487">Comment</a> by

Wibawa on 03/10  at  11:18 AM

<div id="commentNumber488" class="commentEntry">
<p>I am trying to submit date values via ajax during onChange function. Since onChange function trigger twice. ajax call run two times and during result i fetcgh old value. If any one uses date range picker along ajax. Help me. I need to trigger ajax with from and to date as input. since onChange function trigger more than once it errors me.

    <p class="posted"><a href="#commentNumber488">Comment</a> by

staytouch on 03/15  at  12:59 AM

<div id="commentNumber489" class="commentEntry">
<p>prev and next event not work onchange event

    <p class="posted"><a href="#commentNumber489">Comment</a> by

arunkumar.p on 03/18  at  12:38 AM

<div id="commentNumber490" class="commentEntry">
<p>It worked for me ,thanks :)

    <p class="posted"><a href="#commentNumber490">Comment</a> by

Wordpress Developer on 03/20  at  11:21 AM

<div id="commentNumber491" class="commentEntry">
<p>is this still working

    <p class="posted"><a href="#commentNumber491">Comment</a> by

Evan on 03/22  at  02:53 AM

<div id="commentNumber492" class="commentEntry">
<p>Thaks for the post

    <p class="posted"><a href="#commentNumber492">Comment</a> by

Eric on 03/22  at  04:03 AM

<div id="commentNumber493" class="commentEntry">
<p>This is really great - I love it. One thing I’m struggling with though is getting the widget to appear only after clicking a calendar icon. We want to allow users the option to type a date into the field, or use the presets and calendar. I tried using datepickerOptions to use jQueryUI’s button image option, but with no luck:

datepickerOptions: {
showOn: “button”,
buttonImage: “images/calendar_icon.gif”,
buttonImageOnly: true



    <p class="posted"><a href="#commentNumber493">Comment</a> by

Kate on 03/27  at  11:20 PM

<div id="commentNumber494" class="commentEntry">

Great plugin! one visual improvement I would love to see implemented would be to highlight all dates inside a date range. I haven’t found any jQuery plugin that does that.


    <p class="posted"><a href="#commentNumber494">Comment</a> by

Luigi on 03/31  at  07:59 PM

<div id="commentNumber495" class="commentEntry">
<p>Hi, check out our jQuery Event Calendar: <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber495">Comment</a> by

DCS Solution on 04/14  at  08:22 AM

<div id="commentNumber496" class="commentEntry">
<p>Hey, DCS Solution, this is promotion for a product that’s not even available yet! Is this a joke?

    <p class="posted"><a href="#commentNumber496">Comment</a> by

Luigi on 04/14  at  09:13 AM

<div id="commentNumber497" class="commentEntry">
<p>Hi, Luigi. The product is available. If anyone is interested, please contact us on our site for now. We are just sorting some things before putting it up on our site for sell. It might take 1-2 days before we put it up on our site. There’s nothing wrong in promoting your product before actually releasing it. Everyone is doing it.

    <p class="posted"><a href="#commentNumber497">Comment</a> by

DCS Solution on 04/14  at  09:19 AM

<div id="commentNumber498" class="commentEntry">

This date range picker is extremely good.

But after integration with my jqgird and jqgrid smart search panel code, the picker is getting loaded in the end of the page.

Any help is appreciated.

Thanks in advance.


    <p class="posted"><a href="#commentNumber498">Comment</a> by

selvi on 04/16  at  04:52 AM

<div id="commentNumber499" class="commentEntry">
<p>I tested it with jquery-ui-1.7.2.custom.min.js, but don’t work. Anyone?

    <p class="posted"><a href="#commentNumber499">Comment</a> by

Joel Lazzari on 04/16  at  04:26 PM

<div id="commentNumber500" class="commentEntry">
<p>I’m having display issues in IE and FF with JQuery UI 1.8.5. Anyone else? It won’t show the actual date in the text box. Works fine in Chrome and Safari.

    <p class="posted"><a href="#commentNumber500">Comment</a> by

Travis on 04/19  at  10:24 PM

<div id="commentNumber501" class="commentEntry">
<p>DCS Solution, my question was meant for Filament Group, not for Nobody Inc with no product. Please refrain from answering my questions (or piggy-backing on someone else’s website for your own promotion).

    <p class="posted"><a href="#commentNumber501">Comment</a> by

Luigi on 04/20  at  08:54 PM

<div id="commentNumber502" class="commentEntry">
<p>Thank for this Matthew Scott:

earliestDate: Date.parse(’today’), //earliest date allowed

rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);

    <p class="posted"><a href="#commentNumber502">Comment</a> by

Dave on 04/28  at  08:06 AM

<div id="commentNumber503" class="commentEntry">
<p>Kate and Viðar are correct.&nbsp; datepickerOptions doesn’t work when using a button to bring up the datepicker (showOn, buttonImage, &amp; buttonImageOnly).&nbsp; The values are getting passed in correctly to the daterangepicker, but it’s not getting passed to the jQuery datePicker so that the button can get appended to the textbox.&nbsp;

I doubt anyone has a solution however.

    <p class="posted"><a href="#commentNumber503">Comment</a> by

jc on 04/28  at  10:24 AM

<div id="commentNumber504" class="commentEntry">
<p>I found a solution for using an image to open the daterangepicker.

1.  Add an img tag with an id and its src
2.  Add an event to your image
$( “#id").click( function() {
$( “.ui-daterangepicker” ).show();
3.  In daterangepicker.jQuery.js add an option and use it to toggle the datepicker.
var options = jQuery.extend({ buttonForDatePicker: null }, settings);

if( options.buttonForDatePicker != null )
jQuery( options.buttonForDatePicker ).click( function() {
return false;
4.  When initializing the daterangepicker set the element to be used.
$( “#datepick” ).daterangepicker( {
buttonForDatePicker: $("#calendarId")
5.  If you don’t want to the daterangepicker to display when clicking on the textbox, remove the toggle in daterangepicker.jQuery.js around line 283.
//inputs toggle rangepicker visibility
return false;

    <p class="posted"><a href="#commentNumber504">Comment</a> by

jc on 04/28  at  02:10 PM

<div id="commentNumber505" class="commentEntry">
<p>I love this plugin, its perfect for what I need but I’m having the same problem as mentioned in a few other posts here, regarding tabs.

If date range picker is loaded into a tab-less browser it works fine. If however its loaded into a tabbed interface and the date range picker input field is initially hidden, then the calendar is no longer anchored to the input but opens at the very bottom of the screen.

If I refresh the tabbed window, date range picker once again works fine. Any help on this? I have tried one of the suggestions above but to no effect.

Cheers on a great plugin!

    <p class="posted"><a href="#commentNumber505">Comment</a> by

Livestate on 05/03  at  04:12 AM

<div id="commentNumber506" class="commentEntry">
<p>Really nice plugin, thanks, but a couple of issues I found:

For anyone requiring English(UK) dateFormat (i.e. dd/mm/yy), you will find issues after specifiying this unless you also alter the culture info defined for the Date.js code.  I found before altering this that when opening the calendar after previously selecting a date, the date would be assumed to be in US format, hence the calendar would open on the incorrect month.

I’ve yet to resolve this issue…
I’m using 2 inputs for start and end dates.  If you already have dates entered in your two inputs, whether selected using the RP or typed in, unless you previously selected the date from either calendar, upon opening one/both calendars the currently selected/entered date is not highlighted (with ui-state-active)?

Other issue I think is inherent with the jQuery datePicker, but still annoys me…
When your currently selected date is highlighted, when moving to another month, the same day/date of the month will be highlighted for every month.  Doesn’t really cause any issues, but just seems wrong to me.

If anyone has any ideas on either of the above, I’d appreciate any suggestions.

    <p class="posted"><a href="#commentNumber506">Comment</a> by

Tom R on 05/11  at  06:30 AM

<div id="commentNumber507" class="commentEntry">

I’ve read through these these comments, I am trying to have it so that when I click my text box the date range selector is automatically displayed. i.e. the suer doesn’t have to select it.

I have tried the solution that David Rodriguez was given and I am having no luck.

Can anyone please help me? 

Thanks all.

    <p class="posted"><a href="#commentNumber507">Comment</a> by

Adam Fekete on 05/17  at  09:39 AM

<div id="commentNumber508" class="commentEntry">
<p>I have solved the above problem, for all those who want to have the daterangepicker display when the text box is called all you need is  this:

$(’’).daterangepicker( { closeOnSelect: true, onOpen: function(){
$("li.ui-daterangepicker-dateRange").trigger("click"); }});

The important thing to note are the double quotation marks:

GOOD - $("li.ui-daterangepicker-dateRange").trigger("click");
BAD - $(’li.ui-daterangepicker-dateRange’).trigger(’click’);

The Bad version does not work!

I hope that helps people.

    <p class="posted"><a href="#commentNumber508">Comment</a> by

Adam Fekete on 05/17  at  09:54 AM

<div id="commentNumber509" class="commentEntry">
<p>@jc - the code you posted for using an image to launch the datepicker worked beautifully! Thank you for posting :)

    <p class="posted"><a href="#commentNumber509">Comment</a> by

Kate on 05/18  at  12:17 AM

<div id="commentNumber510" class="commentEntry">
<p>It would be useful if you’d link here to your github repository for this plugin (as @tom requested): <a href="" rel="nofollow"></a>

    <p class="posted"><a href="#commentNumber510">Comment</a> by

n0nick on 05/18  at  03:12 AM

<div id="commentNumber511" class="commentEntry">
<p>I really need to have the datepickers expand left instead of right. Isn’t it possible?

    <p class="posted"><a href="#commentNumber511">Comment</a> by

Sune Westphalen on 05/19  at  09:19 AM

<div id="commentNumber512" class="commentEntry">
<p>Has there been any progress with brad’s suggestion in the

Comment by Scott (Filament) on 01/19 at 12:30 PM


    <p class="posted"><a href="#commentNumber512">Comment</a> by

Adam Fekete on 05/19  at  09:49 AM

<div id="commentNumber513" class="commentEntry">

Has there been any progress on preventing the script from having start date that exceeds the end date?  This functionality would be very useful for me.

    <p class="posted"><a href="#commentNumber513">Comment</a> by

Adam Fekete on 05/20  at  06:38 AM

<div id="commentNumber514" class="commentEntry">
<p>This only works with legacy Jquery UI css (1.71 or 1.73), correct?

If I try with the most receny jquery ui (1.83) it doesn’t work. Calendar doesn’t show up. Is there any update for the most recent jquery ui css for this great date picker?

    <p class="posted"><a href="#commentNumber514">Comment</a> by

bobbytuck on 05/24  at  03:39 PM

<div id="commentNumber515" class="commentEntry">
<p>I’ve been using this kind of plug in of one of my website. For this post, I just take a review before updating into a latest version of jQuery.

    <p class="posted"><a href="#commentNumber515">Comment</a> by

employee training and development on 05/31  at  10:08 PM

<div id="commentNumber516" class="commentEntry">
<p>It’s looking very nice. but here i have a doubt, if i want to use same thing multiple times in a single page , how can i use it?


    <p class="posted"><a href="#commentNumber516">Comment</a> by

ramu on 06/10  at  01:28 AM

<div id="commentNumber517" class="commentEntry">
<p>I wrapped the input field in a div and floated the div to the right side of my page. The datepicker now appears below the last menu item of “Date Range”. How can I get this to open to the left of the drop down menu?


    <p class="posted"><a href="#commentNumber517">Comment</a> by

Ang on 06/15  at  03:01 AM

<div id="commentNumber518" class="commentEntry">
<p>The latest version of daterange picker doesn’t work with jquery1.6.1 and jquery-ui 1.8.12. Tested on IE, on FF and Chrome it’s fine.

my links:

    <p class="posted"><a href="#commentNumber518">Comment</a> by

Red on 06/19  at  02:06 AM

<div id="commentNumber519" class="commentEntry">
<p>Previous message: sorry only on FF it’s working.

    <p class="posted"><a href="#commentNumber519">Comment</a> by

Red on 06/19  at  02:19 AM

<div id="commentNumber520" class="commentEntry">
<p>Fix: Add to jquery-ui-1.8.12.custom.css [513]: .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }

Add to ui.daterangepicker.css at EOF: .hasDatepicker DIV { display:block; }

    <p class="posted"><a href="#commentNumber520">Comment</a> by

Red on 06/19  at  02:42 AM

<div id="commentNumber521" class="commentEntry">
<p>Date picker for selecting two date intervals at the same time (e.g. a date interval with “Outward flight dates” and one date interval with “Return flight dates")

I would like to be able to select two date intervals from one single “date picker popup”, e.g. a date interval of “Outward flight dates” and one date interval of “Return flight dates”.

Consider the date range feature in the demo for the following date range picker:

It displays two calendars to become selected into one interval, a start date and an end date.

Similarly, I would like to find a date picker with two calendars, one with “Outward flight date” and one with “Return flight date”.
However, instead of simply being able to choose one date for each (as in the start date and end date example at the filamentgroup site) I would like to be able to select a range of dates for each calendar.
Clicking multiple dates within one calendar can be done with the following date picker:

For example, if I as a end user am flexible regarding the dates, I might want an outward flight at some of the first days of august (e.g. 1-5 by clicking these five dates or even better only having to click 1 and 5, in the “left” calendar with outward flight dates) and then I might want a return flight some of the last days of august (e.g. 25-31 by clicking these seven dates or even better only having to click 25 and 31, in the “right” calendar with return flight dates).

The selected dates should then be retrievable into an array of dates, to make it possible to create two date intervals like this:
8/1/2011 - 8/5/2011 (the interval for outward flight date)
8/25/2011 - 8/31/2011 (the interval for return flight date)

Does anyone know of a date picker that supports this kind of feature ?

    <p class="posted"><a href="#commentNumber521">Comment</a> by

Sven on 07/02  at  05:57 PM