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:

HTML

<input type="text" />

jQuery:

$('input').daterangepicker();

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.

Dependencies

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 Datejs.com 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.
600

Comments

the “previous” button is broken ie. it appears to do the same thing as “next”

Comment by Luka Kladaric on 01/05  at  06:54 PM

@Luka: Good Catch, thanks! Fixed.

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

Really nice! It works great in FF3 but in Chrome and IE7 the animation to show the calendar looks weird.

Comment by Ignacio Vivona on 01/05  at  07:35 PM

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!

Comment by Luka Kladaric on 01/05  at  09:41 PM

Very impressive stuff! Very smooth transitions and fine touches. Any chance in adding time choosing as well?

Comment by Adam Fortuna on 01/06  at  08:00 AM

Doesn’t work in Opera, which renders this useless.

Comment by Dude on 01/06  at  10:07 AM

Impressive indeed! I’ll have to look more into this themeroller stuff, but this looks really good.

Comment by Atilla on 01/06  at  10:10 AM

Sigh, the problem was that it was using iframe. When do people learn that everyone doesn’t have iframe enabled?

Comment by Dude on 01/06  at  10:10 AM

@Dude: With iframe disabled, do you still get a link to view the demo in a new window? This was our intention…

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

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.

Comment by Volomike on 01/06  at  10:23 AM

@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: https://jqueryui.pbwiki.com/TimePicker

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

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

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

@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… :)

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

@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.
Thanks!

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

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!

Comment by Wynn Netherland on 01/06  at  03:48 PM

Suggestions:

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

Comment by Volomike on 01/06  at  03:55 PM

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

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

@Volomike:
- 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.

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

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 http://www.dhtmlgoodies.com/scripts/js_calendar/js_calendar.html

Comment by seshu on 01/07  at  02:43 AM

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?

Comment by Teo on 01/07  at  12:14 PM

Hi, how i can do that when i do click in ‘chose a date’ and show the menu show too the Date Range.

Thanks

Comment by David Rodriguez on 01/08  at  09:50 AM

@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?

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

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

Comment by David Rodriguez on 01/08  at  03:11 PM

Hi can somebody help me wtih the question that is up??? Thanks

Comment by David Rodriguez on 01/09  at  03:23 PM

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

$(’input’).daterangepicker({
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.

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

Hey Maggie thanks this work very good

Comment by David Rodriguez on 01/09  at  11:24 PM

In Opera this webpage looks like this: http://www.abload.de/image.php?img=screenshot_001_090113h9me.png !

Comment by carlos on 01/13  at  04:07 AM

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:

jQuery(document).click(function(){
if (rp.is(’:visible’)) {
hideRP();
}
});

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

Comment by bear on 01/14  at  11:42 AM

@bear: Thanks for letting us know. The script and zip are now updated with this change.

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

The daterange picker seems to always show up after the closing tag of the form… how can this be altered?

Comment by firefly on 01/15  at  12:12 PM

@firefly:  You can use the appendTo, posX, and posY options to configure that to your needs.

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

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?

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

</form>

Comment by Justin on 01/15  at  04:17 PM

@Justin: You should probably check your selector to make sure it’s scoped to just the first input in that code sample.
$(’#rangeA’).daterangepicker();

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

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

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…

FF3 OS X

Comment by Tim Yates on 01/16  at  05:58 PM

This is awesome! Great in FF3!

But in IE8 with even compatibility mode gives bugs…

Btw really awesome contribution wow!

Comment by James on 01/16  at  10:03 PM

Nice work!  This is amazing code.  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.  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!

Comment by Brad Fimore on 01/16  at  10:19 PM

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)

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

There are problems with month To date & Years to date on the Demo. It’s not the good date

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

@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 http://jqueryui.pbwiki.com 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.

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

Hi,
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

Comment by justin on 01/20  at  04:32 PM

@justin: what does your selector look like? Make sure you aren’t talking to all inputs in your form, just the two text inputs.

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

Will the following code restrict the picker to 2 text areas?
$(function(){
$(’#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…

Comment by justin on 01/20  at  04:49 PM

@justin: combine those selectors into one and you should be okay.
$(’#range1, #range2’)

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

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

Comment by Gafitescu Daniel on 01/21  at  03:51 AM

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 !

Comment by Peepingtom on 01/21  at  11:48 AM

Question:

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?

Comment by NTulip on 01/21  at  04:43 PM

Comment by NTulip on 01/21  at  04:44 PM

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)?

Regards

Comment by quim on 01/24  at  03:48 PM

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.

Comment by Goran Juric on 01/25  at  08:48 PM

I don’t know jQuery, but there is my script for multiple rangepicker instances:

$(’.datapicker’).bind(’focus’,function (){
$(’div.ui-daterangepickercontain’).remove()
$(’.datapicker’).daterangepicker({appendTo: ‘#append_here’});
$(this).click();
});

$(’.datapicker2’).bind(’focus’,function (){
$(’div.ui-daterangepickercontain’).remove()
$(’.datapicker2’).daterangepicker({appendTo: ‘#append_here2’});
$(this).click();
});

Comment by baael on 01/28  at  02:17 AM

How can I change Presets Text (Specific Date, All Dates Before, All Dates After, Date Range)?

Comment by quim on 02/01  at  02:09 PM

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.

Comment by Chris Barr on 02/04  at  06:46 PM

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

Comment by chris catton on 02/05  at  07:56 AM

ok, it does work with 1.3 - at least somewhat.  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

Comment by chris catton on 02/05  at  09:12 AM

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

Comment by frank on 02/05  at  10:44 AM

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

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

@ 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:

$(document).ready(function(){
$("#rangeA").daterangepicker();
});

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

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.

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

@ 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…

$(’input’).daterangepicker({
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.

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

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

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

@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?

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

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

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

@ frank: please clarify. I don’t quite understand what you’re trying to do. thanks.

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

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.

onOpen:function(){
$(’.range-start’).datepicker(’setDate’,Date.parse(’29.01.2009’));
$(’.range-end’).datepicker(’setDate’,Date.parse(’31.01.2009’));
}

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?

Comment by frank on 02/05  at  11:48 AM

@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

Comment by chris catton on 02/05  at  11:50 AM

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.

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

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…
Thanks!

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

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

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

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

Comment by chris catton on 02/06  at  11:54 AM

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"}});

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

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:

onOpen:function(){
$(’.range-start’).datepicker(’setDate’,Date.parse(’29.01.2009’));
$(’.range-end’).datepicker(’setDate’,Date.parse(’31.01.2009’));
}

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(){
randomfunction.set(myself.sDateStart,myself.sDateEnd);
}

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

Comment by frank on 02/09  at  04:51 AM

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

Comment by dipone on 02/09  at  11:57 AM

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

Thnaks

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

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:

$(function(){
$(’#rangeA’).daterangepicker();
});

The ones i’m using are:

http://jqueryfordesigners.com/coda-slider-effect/
http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/
http://medienfreunde.com/lab/innerfade/

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.

Comment by Rob on 02/10  at  10:29 AM

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.

Comment by Rob on 02/10  at  10:31 AM

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

Thanks

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

$(’input’).daterangepicker({
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.

Comment by David Rodriguez on 02/12  at  03:41 PM

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 rp.show(); 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?

Comment by chris catton on 02/12  at  06:45 PM

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 :)

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

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

$(document).ready(function(){
$(’#enquiry_booking_dates’).daterangepicker();
});
$(document).ready(function(){
$(’#enquiry_event_dates’).daterangepicker();
});


<% 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
console.log(rangeInput);
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 ....)

Comment by chris catton on 02/16  at  03:43 PM

sorry - for datepicker in the above post, read daterangepicker
C

Comment by chris catton on 02/16  at  03:44 PM

Thanks Scott

Translation is complete now.

Comment by Quim on 02/17  at  09:05 AM

Hi all,

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

http://www.frenchmans.freshmango.com/datepicker.asp

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

Ideally I’d like it this size:

http://jqueryui.com/demos/datepicker/

Thanks in advance for any help!

Bob

Comment by Bob on 02/17  at  09:56 AM

@ 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 ThemeRoller.com 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 http://groups.google.com/group/jquery-ui. You’ll get help much quicker there.

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

Scott,

That did it!  Thanks for your help

Regards

Bob

Comment by Bob on 02/18  at  09:56 AM

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.

Comment by regina on 02/18  at  06:36 PM

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.  then I just put each of them in their own $(document).ready(function() {
$(’input.rangeA’).click(function() {
$(’input.rangeA’).daterangepicker({
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.

Comment by regina on 02/20  at  03:45 PM

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 http://www.world-holiday-rentals.com/advancedsearch.html

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

hello
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?
asaf

Comment by asaf on 02/23  at  01:11 PM

Hello…
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?
Thanks,

Comment by Souhail Jabbour on 02/25  at  01:22 AM

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.

Comment by nerkles on 02/27  at  03:01 PM

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. Date.today()) 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…

hth

Azadi

Comment by Azadi Saryev on 03/06  at  12:23 PM

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?

Cheers

Comment by redsquare on 03/09  at  09:11 AM

test link for above issue http://jsbin.com/ajusu

Comment by redsquare on 03/09  at  09:18 AM

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.

Comment by Kevin on 03/11  at  01:59 PM

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 :(

Comment by Mckensy on 03/13  at  05:55 AM

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…

console.log(days);
$(’input’).daterangepicker({
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

Comment by riegersn on 03/14  at  11:37 PM

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.

Comment by riegersn on 03/14  at  11:58 PM

What License is this date-picker?
I checked that datejs is MIT.
Is this MIT?

Comment by barry on 03/16  at  02:15 PM

riegersn, you helped me figure out the earliestDate issue by using Date.parse()!

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

Works like a champ! Thanks!

Comment by nklineg on 03/19  at  01:34 PM

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?

Comment by ad on 03/19  at  02:44 PM

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: http://filamentgroup.com/examples/daterangepicker_v2/index_132.html
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.

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

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.  It’s just one input field.

Comment by Mike McNally on 03/24  at  03:00 PM

Thanks Mike. Fixed now.

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

Cool, thanks!  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.  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.

Comment by Mike McNally on 03/25  at  11:01 AM

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’)) :
jQuery(this).data(’dateStart’);
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’);

by:

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

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

It seems the function form of the custom ranges is not working. However, this is very easily fixed. Lines 227 & 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. :)

Comment by AKX on 03/26  at  09:43 AM

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 tips.am 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">
<label>From:</label>
<input type="text" id="rangeA" name="date1" class="daterange" value="Begin Date” />
<label>To:</label>
<input type="text" id="rangeB" name="date2" class="daterange" value="End Date” />
<br><br>
<input type="Submit" value="Submit" ></input>

Greatly appreciated.

Comment by Javier on 03/26  at  05:28 PM

comments on?

Comment by admin on 03/27  at  09:28 AM

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

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

GREAT work here !! but ,, have you any plans for making Localization ?!

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

I’m having a problem using this cool date range picker.  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).  The problem occurs after the Crystal Report is displayed under the controls.  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.  I dont know what has caused this and only happens in IE. Works fine in FF.  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

Comment by Hokagenz on 03/29  at  09:29 PM

Hi,

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

Thank you for a nice plugin.

Comment by John Emmanuel on 03/30  at  06:46 AM

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 :)

Comment by Murali on 03/31  at  07:00 AM

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

Comment by Veronica on 03/31  at  08:10 PM

Hi,

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?

Comment by Nischal Shetty on 04/01  at  12:15 AM

Ok.. in this very page you have 2 separate datepickers… How do I do that??

Comment by Nischal Shetty on 04/01  at  12:36 AM

@shetty - they do it by loading the content in an iframe.  I really wish there was a better way to put 2 of these on a single page.  Any ideas?

Comment by Jeremy on 04/05  at  12:59 AM

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.  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(){

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

and I changed this line:
jQuery(this).addClass(’ui-state-active’).clickActions();

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

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

Comment by Jeremy on 04/05  at  01:49 PM

I forgot you also have to pass “doneBtn”.

Comment by Jeremy on 04/05  at  02:00 PM

Updates:

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!

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

Great plugin. I would like to make the menu & 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?

Comment by Bec on 04/07  at  02:44 AM

@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(){
rp.show();
options.onOpen();
}
function hideRP(){
rp.hide(0,function(){ options.onClose(); });
}

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

In case anyone is interested, here’s a comment from the web about setting each text input’s value upon making a selection:

http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/b74812ee21df8ad7

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

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.

Comment by Peter Bengtsson on 04/09  at  09:28 AM

About my last error, it can be seen in action here:
http://crosstips.org/statistics/graph/

Comment by Peter Bengtsson on 04/09  at  09:33 AM

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…

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

@Scott, you’re so right! I didn’t go back to the obvious. Thanks.

Comment by Peter Bengtsson on 04/09  at  09:59 AM

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.

Comment by Kris Gosser on 04/09  at  01:32 PM

@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: http://www.datejs.com/

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

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

Comment by Kris Gosser on 04/09  at  01:59 PM

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(); } }

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

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

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

Thanks Scott, got it all to work now.

Noted on the passing of functions too.

Comment by Kris Gosser on 04/09  at  02:33 PM

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:
http://joaogala.com.sapo.pt/v2/index.html

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

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

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

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.

Comment by Herr Kaiser on 04/15  at  11:46 AM

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 http://joaogala.com.sapo.pt/v2/index.html to see the last version

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

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?

Comment by WadeO on 04/16  at  03:54 PM

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!

Comment by HT on 04/17  at  09:59 AM

@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: http://wiki.jqueryui.com/DateRange

@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 http://jqueryui.com/download/ 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?

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

Is the onClose event firing 3 times for anyone else?

Comment by Justin on 04/17  at  10:49 PM

RE : onClose Firing 3 times.  The code below will show an alert “Change” 3 times.  Also, the closeOneSelect does not work.

Any help would be greatly appreciated.

$(’#dates’).daterangepicker(
{
closeOnSelect: true,
posY: div_pos.top,
posX: div_pos.left + 830,
onClose: function(){
alert(’Change’);
}
}
);

Comment by Justin on 04/17  at  10:58 PM

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?)

jQuery(’input.somethingthatdoesnotexistyet’).daterangepicker();

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

Comment by Aditya Sanghi on 04/18  at  05:43 AM

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?

Comment by Philip Pond on 04/20  at  07:18 PM

I am new to jquery.  I have set up my daterangepicker and it works nicely.  When the daterangepicker is complete I need the value sent to another function [showHint(date_range);].  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.  Does anyone have a suggestion?

Comment by Tiffany on 04/22  at  10:18 AM

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.  But I don’t know how to do this...please help.

Comment by Tiffany on 04/22  at  10:23 AM

It’s possible just to show one preset without the menu?
Excellent work though and Thanks in advance !

Comment by Pablitt on 04/22  at  03:54 PM

How do I pass the date to a function ie. showHint(<date range goes here>) after the dates have been selected?

I tried:
$(function(){
$(’#rangeA’).daterangepicker({
posX:800,
posY:525,
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?

Comment by Tiffany on 04/24  at  12:40 PM

Is it possible to limit the date range to +/- 1 year?

Comment by Tiffany on 04/24  at  03:54 PM

Is it possible to set first day of week to Monday?

datepicker default option firstDay not working ;(

Comment by Mastyf on 04/25  at  06:39 PM

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.

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

Arrows fire onClose twice, while selecting a range fires it three times,

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

Seems to work :-P

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

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

Comment by Tiffany on 04/27  at  10:58 AM

So, it works, but since it executes my AJAX scripts 2 to 3 times every time the daterangepicker is called, it slows things down.  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?

Comment by Tiffany on 04/27  at  11:11 AM

Mastyf,

I set the first day to Monday using

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

Comment by Tiffany on 04/27  at  11:51 AM

@everyone: we’re working on a fix for the event firing bug. We’ll let you know when we’ve updated the script.

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

FYI date.js install is not compatible with Linux or Mac.

Comment by Tiffany on 04/27  at  12:05 PM

@Tiffany: can you elaborate on the problem you’re seeing? We’ve had no issues with date.js on Mac.

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

Scott,

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.

Comment by Tiffany on 04/27  at  02:59 PM

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

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

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

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

Um. It closes again immidiately after clicking it (On Firefox 3.0.9, seems to work in Chrome)

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

@Tor I. Pettersen: should be okay now - sorry. Hard refresh and it looks good for us. Let us know!

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

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.

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

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

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

Thanks a lot for ur script…

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

Thanks,
RathikaPoobalan

Comment by RathikaPoobalan on 05/05  at  08:50 AM

I just downloaded this today.  On lines 109 and 114 you have:

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

is that code really useful?

Comment by Matt on 05/07  at  02:41 PM

Feature to add :
Multi date selection highlights

Comment by shamun toha on 05/10  at  07:09 AM

When specifying a custom range i would like to see all the UI interaction to happen on one calendar instead of two.  This saves screen real estate.

Comment by Eric on 05/11  at  09:08 AM

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

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

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.

Comment by hazarin on 05/14  at  03:45 AM

I temporaly fix this with this code:

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

Waiting for ui release.

Comment by hazarin on 05/14  at  04:10 AM

What about the ability to set just a specific month without a day?

Comment by Steve on 05/14  at  03:28 PM

I can’t get the demo to work in IE7. I keep getting the following error:

Line: 126
Char:4
‘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 http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
Operation Aborted.

Any ideas?

Comment by Mike on 05/14  at  10:50 PM

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?
eg

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

thanks

Comment by KAB on 05/15  at  07:15 AM

never mind - got the year via javascript
thanks

Comment by KAB on 05/15  at  07:58 AM

Quarters would also make a great new feature.

Comment by Steve on 05/15  at  11:40 AM

I am also getting the IE error Mike mentioned but in IE8 - won’t work and can’t display your web page.

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

It eventually crashed IE8 completely.

Comment by Scott on 05/15  at  02:26 PM

Sorry everyone. There was a trailing comment in the source that was throwing IE off.
Should be better now. The zip is updated.

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

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.

Comment by Scott Whigham on 05/15  at  03:13 PM

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

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

I got it working in IE by setting the preset Ranges rather than leaving it default. 

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’ }]

Comment by Mike on 05/15  at  04:09 PM

@Mike: That’ll work too, since that’s where the bug was. :) The script is fixed now too though.

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

@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!

Comment by Scott Whigham on 05/15  at  04:26 PM

IE problem fixed.  Thanks.  Great plugin BTW

Comment by Mike on 05/15  at  09:51 PM

Fantastic plugin! looks and works great. 

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!

Comment by Shadi Almosri on 05/18  at  05:19 PM

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)

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

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.

Comment by David Herring on 05/20  at  09:02 PM

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

Comment by David Herring on 05/20  at  09:07 PM

Example with multiple date selects using Jquery.

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

Comment by David Herring on 05/20  at  09:30 PM

It would be nice to incorporate a year dropdown so you can use it for a Date of Birth

Comment by Neil on 05/22  at  12:09 PM

This date picker is fantastic, however, is it possible to use it WITHOUT the popup?  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?

Comment by Joshua Lippiner on 05/23  at  02:24 PM

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,

Comment by Kemal on 05/25  at  02:48 AM

http://www.eyecon.ro/datepicker/

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.

dave

Comment by David Herring on 05/25  at  05:19 AM

I’m getting a weird problem on Safari 4, which I noticed is also happening on your site example as well:

http://www.filamentgroup.com/examples/daterangepicker_v2/

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.

Comment by Yehuda on 05/25  at  09:20 AM

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;
width:600px;
z-index: 999;
}

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

Comment by Yehuda on 05/25  at  10:00 AM

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
http://www.filamentgroup.com/examples/daterangepicker_v2/

and you are using jquery.1.3.1

Any ideas how to make this work for 1.3.2?
Thanks

Comment by Yehuda on 05/26  at  04:30 AM

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

Comment by alex on 05/27  at  06:54 PM

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 ?

Comment by alex on 05/27  at  07:47 PM

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() {
$(’input’).daterangepicker({
datepickerOptions: { onSelect: function() { alert(’OnSelect’); } },
onClose: function() { alert(’OnClose’); }

});
});

Results:

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

Comment by Tony on 05/28  at  01:15 AM

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

Comment by jordan on 05/29  at  12:06 AM

Sorry to be so hasty with the last post! I just upgraded from chrome 1.0.154.65 to 2.0.172.28 and it works fine.

Thanks for the great plugin :)

Comment by jordan on 05/29  at  12:11 AM

never mind, i now got these options working
datepickerOptions:{changeMonth: true, changeYear:true} =)

Comment by alex on 05/29  at  11:37 AM

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

Comment by nobutaka on 05/31  at  10:00 AM

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

Comment by Rodrigo on 06/02  at  07:04 AM

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

Comment by Rodrigo on 06/02  at  02:19 PM

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 ?

Comment by alex on 06/02  at  04:08 PM

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:

(function(jQuery){

and this line at the end of the file:

})(jQuery);

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

Comment by timmfin on 06/05  at  02:26 PM

I have encountered a clash between the Date Range Picker plug in and the Data Tables plug in (http://www.datatables.net).  In particular the sort function of the Data Tables plug in stops working when the Date Range Picker code is included.  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” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8” />
<title>Untitled Document</title>




<!-- -->

$(document).ready(function() {
$(’.dataTable’).dataTable({});

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

}); // END :: ready function

</head>

<body>

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

<table class="dataTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Project</th>
</tr>
</thead>

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

</body>
</html>
++++++++++++++++++++++

Comment by Eddie Flowers on 06/09  at  06:05 AM

<sXcript type="text/javascript\" src="{PATH TO}/jquery-1.3.1.min.js">
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

/jquery-ui-core.min.js">

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

<!-- -->

Comment by Eddie Flowers on 06/09  at  06:07 AM

Greetings,
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,
Henry

Comment by Henry Contreras on 06/10  at  12:16 PM

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;
}

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

Thanks

Comment by no on 06/11  at  02:36 PM

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?

Comment by Patrick on 06/16  at  06:58 AM

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 :)

Comment by Stefan on 06/16  at  08:53 AM

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

Comment by Lucas on 06/20  at  05:50 PM

Is there a way of unbinding the daterangepicker from an element once it as been applied similar to the destroy option of datepicker?

$("#someTextFiel").datepicker(’destroy’);

Comment by Milton on 06/23  at  04:09 AM

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

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

Anything with only a popup calendar?

Comment by Auto Baneasa on 06/23  at  02:11 PM

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!

Comment by Jenny on 06/23  at  09:13 PM

can you schedule the fix for multi instances? can’t do without it.

Comment by eran on 06/24  at  09:30 AM

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];
clearTimeout(t);
};

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

Comment by Scott Brown on 06/24  at  03:22 PM

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?

Comment by Mike McNally on 06/25  at  09:12 AM

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

Comment by Mike McNally on 06/25  at  09:18 AM

oh durr I just realized I can re-label the button myself.  Forgive me for the spam (though I bet my co-workers will consider the label change to be a cop-out :) )

Comment by Mike McNally on 06/25  at  09:20 AM

Hi.  Me again.  I think I have figured out the root issue.  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.  When “closeOnSelect” is true, the “Done” button doesn’t serve any useful purpose - clicking a date closes the dialog.

Comment by Mike McNally on 06/25  at  03:07 PM

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($) {
$(’.date_range_picker’).daterangepicker();
}

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?

Thanks!

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

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:

http://thehumblecoder.wordpress.com/

Comment by Michael Ritsema on 07/01  at  03:13 PM

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?

Comment by Nigel on 07/09  at  11:25 AM

Sorry about that, we just figured it out, it was a comma missing.

Comment by Paul Russo on 07/13  at  02:27 PM

Hi,
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

Comment by Chris on 07/15  at  09:15 AM

Hello,

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?

thanks!

Comment by JamesR on 07/15  at  10:23 PM

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

Comment by thommy on 07/20  at  08:59 AM

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?

Comment by Kevin on 07/21  at  01:17 PM

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

Comment by Chris on 07/21  at  01:34 PM

@Chris: Do you have a code example of this?

Comment by Kevin on 07/21  at  02:59 PM

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:

“Today,
Last 7 days,
Month to date,
etc.”

Is that at all possible?

Thanks

Comment by NR on 07/21  at  04:11 PM

@Kevin: something like this:

function toggleCal()
{
if($(’.ui-daterangepickercontain’).length == 0)
{
$(’#inputCal’).show(300);
$(’#rangeA’).daterangepicker({
arrows:true,
dateFormat:’dd/mm/yy’,
closeOnSelect:false,
mode: ‘range’
});
}
else
{
if($(’#inputCal’).css(’display’) == ‘none’)
$(’#inputCal’).show(300);
else
$(’#inputCal’).hide(300);
}
}

Comment by Chris on 07/22  at  07:28 AM

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:

$(function(){
$(’#rangeA’).daterangepicker({arrows:true});
$(’.p2off-alt’).daterangepicker({
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.

Comment by NR on 07/22  at  08:39 AM

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.

Comment by Travis on 07/22  at  02:35 PM

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

Comment by cookie on 07/29  at  07:10 PM

Hi guys,
Am tryin using this date picker in a popup form but it didn’t work.
Any help plz…

Comment by pans on 07/30  at  08:22 AM

Hello,

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?

Comment by Jason Palmer on 07/30  at  04:35 PM

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
jQuery(options.appendTo).append(rp);

replaced by

//inject rp
jQuery(options.appendTo).after(rp);

Hope it could help someone :)

Comment by Johan - KEYRIO on 07/31  at  04:52 AM

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:
jQuery(options.appendTo).append(rp);

To:
jQuery(this).after(rp);

And that works great for me now!

Comment by Jason Palmer on 07/31  at  03:24 PM

Hello,
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"/>

Comment by shaun on 07/31  at  04:16 PM

@shaun :

try

$(’#input_date’).daterangepicker( );

instead of

$(’input_date’).daterangepicker( );

Comment by Johan - KEYRIO on 07/31  at  04:36 PM

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?

Comment by Liam on 08/04  at  04:39 AM

This is probably something of a n00b question but I’m not really a programmer, I just play one when budgets are tight. 

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!

Comment by Fritz on 08/06  at  04:08 PM

On the above question the comment box mangled my URL.  What is listed as &#x2F; in the question is really a percent 2f for a URL encoded forward slash.

Comment by Fritz on 08/06  at  04:11 PM

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.

Regards

Comment by Maverick on 08/09  at  09:12 AM

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
jQuery(this).click(function(){
toggleRP();
return false;
});

TO

//inputs toggle rangepicker visibility
jQuery(this).focus(function(){
showRP();
return false;
});

jQuery(this).blur(function(){
hideRP();
return false;
});

Comment by Travis on 08/14  at  08:28 AM

Disregard that.. blur() hides the rangepicker before you can click more than 1 date. >.<

Comment by Travis on 08/14  at  08:32 AM

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) {
jQuery(curr).trigger(’click’);
}
});

//inputs toggle rangepicker visibility
jQuery(this).click(function(){
toggleRP();
return false;
});

Bam, said the lady.

Comment by Travis on 08/14  at  09:59 AM

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;

jQuery(nex).keyup(function(e){
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) {
jQuery(curr).trigger(’click’);
shifttab = false;
}
});

jQuery(prev).keydown(function (e) {
if (e.which == 9) {
jQuery(curr).trigger(’click’);
}
});

jQuery(curr).keydown(function(e){
if (e.which == 9) {
if (rp.is(’:visible’)) {
hideRP();
}
}
});

//inputs toggle rangepicker visibility
jQuery(this).click(function(){
toggleRP();
return false;
});

Comment by Travis on 08/14  at  01:33 PM

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) {
tabit=true;
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) {
jQuery(curr).trigger(’click’);
}
});

jQuery(curr).keydown(function(e){
if (e.which == 9) {
if (rp.is(’:visible’)) {
hideRP();
}
}
});

jQuery(nex).keydown(function(e) {
if (e.which == 9 && shifttab) {
jQuery(curr).trigger(’click’);
shifttab = false;
}
});

//inputs toggle rangepicker visibility
jQuery(this).click(function(){
toggleRP();
return false;
});

Comment by Travis on 08/14  at  02:04 PM

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

Comment by Giovanni Battista Lenoci on 08/19  at  09:26 AM

Do i install it in same directory as jquery? I have mine installed c:\webprojects\testproject\scripts\[jquery lib resides here]

Comment by jd on 08/19  at  01:11 PM

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!

Comment by chris on 08/20  at  07:47 PM

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">
input.rangepicker-fix
{
height:17px !important;
font-size:8pt !important;
padding-bottom:0 !important;
padding-top:0 !important;
}

div.rangepickercontain-fix
{
font-size: 8pt !important;
}
</style>

var applyFix = function()
{
var picker = $(’div.ui-daterangepicker-arrows’);
var container = $(’div.ui-daterangepickercontain’);
container.addClass(’rangepickercontain-fix’);
var offset = picker.offset().top + picker.outerHeight();
container.css(’top’, offset);
}

$(function(){
$(’input#DatePickerTarget’).daterangepicker(
{
arrows:true,
onOpen: applyFix
});
});

<input type="text" id="DatePickerTarget" class="rangepicker-fix"/>

Comment by Vladimir Smirnov on 08/24  at  07:09 AM

Humm… interesting,

I learned lots of thing reading this post and specially comments, and specially thanks to Travis

Anyway, thanks for the post

Comment by software developer on 08/27  at  01:22 PM

Hi, first off thank you for such a great date picker tool, I really like the look and feel of it.  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.  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.  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.  I’m opening the datepicker in a seperate <div> as follows:

$(document).ready(function(){
$("#start_date").daterangepicker( { appendTo: $(’#date_picker_container’) });
});

When the button is clicked I do:

$("#start_date").click();

Any suggestions would be greatly appreciated.

Comment by Brian on 08/27  at  01:51 PM

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.

Comment by Jason on 08/27  at  05:48 PM

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.eq(0).val(rangeA);
rangeInput.eq(1).val(rangeB);
}
else{
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);

Comment by Jason on 08/27  at  06:06 PM

IS there a way to have a separate element that shows total number of days selected in a range?

thanks

Comment by TJ on 08/28  at  01:02 PM

Kudos to a slick date picker.  You guys were really thinking outside the box.  Would be nice to have an option for just date range and 2 separate text boxes.  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

Comment by Mike on 08/31  at  01:56 AM

doesnt work in opera.. :(

Comment by Stefan on 09/01  at  04:44 AM

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?

Comment by Erik on 09/03  at  09:28 AM

BTW, did some additional testing, seems to be a Firefox in Linux issue.

Comment by Erik on 09/03  at  09:41 AM

@Erik That is an odd bug that I can’t test here (no Linux). Does it happen on the standalone demo pages too?
http://www.filamentgroup.com/examples/daterangepicker_v2/index4.html

Since this uses the jQuery UI datepicker widget, I’d be curious to know if you can reporduce the issue on their demo pages:
http://www.jqueryui.com/demos/datepicker/

If so, please file a bug in the UI Trac system.

Comment by Todd (Filament) on 09/03  at  09:46 AM

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

Comment by Todd (Filament) on 09/03  at  09:53 AM

Is it possible to the make the select calendars fly out to the left?  Or....even better...do so based on the viewport?

Thanks for any tips!

Comment by Ben on 09/03  at  07:49 PM

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?

Comment by Luke Scammell on 09/05  at  06:06 AM

Hi

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

Comment by quim on 09/06  at  05:34 PM

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?

Comment by Alex on 09/07  at  09:22 AM

Hi

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

Regards

Comment by quim on 09/18  at  04:10 AM

Hi,

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.

Comment by Chali Wires on 09/20  at  04:14 PM

Resolved the issue. Removed the Css tag name from the input control. Wrapped the whole control into a <Div> Statement, and positioned the Div.

Keep up the good work!!!

Comment by Chali Wires on 09/21  at  06:29 AM

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){
$(’.ui-daterangepickercontain’).remove();
});

also to float element over dialog, i needed to fix z-index:

.ui-daterangepickercontain {
position: absolute;
z-index: 1999;
}

hope this helps.

Comment by Romans Malinovskis on 09/29  at  01:46 AM

Great work!..

...but…

when I use daterangepicker in ui-tabs plugin .ui-daterangepickercontain display under body. datepicker work normally.

how fix it?

Comment by ploutos on 09/30  at  12:29 AM

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

Comment by Frank on 09/30  at  08:52 AM

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.

Comment by Martijn on 10/01  at  07:26 AM

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?

Comment by Kris on 10/02  at  09:50 AM

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”

Comment by Peter on 10/06  at  10:55 PM

Am I in a situation where my comment has been taken out or did I forget to send it over the wire :-)
r. Sandor

Comment by carstep on 10/07  at  01:24 PM

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

Comment by carstep on 10/07  at  01:34 PM

Use “Date.parseExact” instead of “Date.parse” if you use different date format.
Be careful using date format with jQuery or DateJS library.

Comment by Albert on 10/08  at  08:24 AM

The pure superb-ness of this date-picker is really inspiring. Great work. Keep it up.

Comment by Kyle Farris on 10/19  at  10:50 AM

Hi

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.

Regards

Comment by quim831 on 10/22  at  08:54 AM

Hi,

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!

Comment by CC on 10/22  at  06:02 PM

Verry good code, Thanks for this… I’m looking for an tools like this !!

This is an very good solution !!! :) :) :)

Comment by Sun Location on 10/23  at  08:32 AM

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 )
rp.click(function(){return false;}).hide();
else
rp.mouseleave(function(){hideRP();});
return this;

Of course you need to add “sticky:false” to the options array near the top too.

Comment by Greg on 11/10  at  12:20 PM

Hi,

Is there a easy way to get all the dates included in a date range highlighted?

Thanks

Comment by Adrien on 11/11  at  04:15 PM

First, thanks very much for making this.  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.

Comment by Ed on 11/13  at  06:42 PM

Thanks for this great plugin!

Comment by Maxime on 11/23  at  09:07 AM

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

move
jQuery(options.appendTo).append(rp);
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 ~ :-)

Comment by Tomato on 11/26  at  10:02 AM

I also had some problem with datepicker. Now it resolved thanks

Comment by Basil on 11/26  at  10:02 PM

Hi,

I’ve been trying to get this to work:

{text: 'Week to date', dateStart: function(){ var x = Date.today().getWeek(); return Date.today().setWeek(x); }, 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!
Charlie

Comment by Charlie on 12/01  at  09:07 AM

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?

Comment by Phil Desrosiers on 12/04  at  01:53 PM

Another dumb question: What is the purpose of the “Done” button, when the picker closes as soon as I click a date?

Comment by Phil Desrosiers on 12/04  at  02:00 PM

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…

Comment by Phil Desrosiers on 12/06  at  06:12 PM

I am having a bit of trouble using this inside a form to select dates.  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.  I am unable to get the dateStart and dateEnd variables.  Can anyone assist?

Comment by Timms on 12/10  at  10:00 AM

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

Comment by Timms on 12/10  at  12:35 PM

Scratch my previous post, I was able to get it working.  Awesome work on this by the way.

Comment by Timms on 12/11  at  08:08 AM

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

Comment by Philip on 12/11  at  08:09 AM

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);

Comment by Grover Campos on 12/17  at  03:42 PM

Nice work .. Keep rocking ..

Comment by Selva on 12/22  at  10:37 PM

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

if(options.posX){
rp.parent().css(’left’, options.posX);
}
if(options.posY){
rp.parent().css(’top’, options.posY);
}

and changed;

//inputs toggle rangepicker visibility
jQuery(this).click(function(){
toggleRP();
return false;
});

to:

//inputs toggle rangepicker visibility
jQuery(this).click(function(){
rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());
toggleRP();
return false;
});

in version 01.19.2008 of daterangepicker.

Comment by William Shostak on 01/05  at  11:00 PM

Hi,

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.

Thanks.

Comment by Jessie on 01/06  at  03:16 AM

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 +” }

],

Comment by Daxon on 01/10  at  09:09 PM

never mind, Used the API instead,

{text: ‘Today’, dateStart: ‘Today’, dateEnd: ‘today +’ },
{text: ‘Next Friday’, dateStart: ‘next friday’, dateEnd: function(){ return Date.today().next().saturday(); }},
{text: ‘Next Saturday’, dateStart: ‘next saturday’, dateEnd: function(){return Date.today().next().sunday(); }}

Comment by Daxon on 01/10  at  09:29 PM

How can I control font size?  In the demo the html body font size is changed to around 60%.  Nice for a demo but in practice I don’t want my whole page shrunk.  I tried setting .ui-datepickercontain to the 60% but nothing happened.  Is there a better way to resize just the datepicker pop-up+calendars?
Thanks!

Comment by Greg on 01/15  at  11:56 AM

Is this compatible with jQuery 1.4?

Comment by Timms on 01/19  at  11:59 AM

Hello,

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?

Comment by Pasci on 01/20  at  05:09 AM

I’m using datepicker - great app.  I need the calendar to display certain dates in different colors if we have home/away games.  Is there a way to feed dates prior to the calendar displaying that will change the background-color for these specific dates?  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.

Comment by LG on 01/20  at  10:51 PM

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.

Comment by ian on 01/21  at  06:23 AM

A great & cool widget. It is easy to use & integrate. We can also use multiple instances in the same page. Yes i did it!!!!!!!!!

Comment by varun on 01/22  at  01:12 AM

Hello,

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.

Comment by supster on 01/29  at  06:03 PM

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("ul").hide();
rp.find(”.ranges").css("marginLeft", “0px");
rp.find(”.ui-daterangepicker-dateRange").trigger("click");
}

Comment by alex on 02/01  at  04:20 PM

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?

Comment by SteveA on 02/02  at  02:16 PM

For Multiple instances use these following code:

$(function(){
$(’input.datePicker1’).daterangepicker();
$(’input.datePicker2’).daterangepicker();
$(’input.datePicker3’).daterangepicker();
});

At last, just assign classes (datePicker1,datePicker2,datePicker3) for your input boxes. There is no need of CSS for the above class

Comment by Varunkumar on 02/02  at  11:43 PM

Thanks but what you are suggesting is something I had already tried.  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:

$(function(){
$(’input.datePicker1’).daterangepicker();
$(’input.datePicker2’).daterangepicker();
$(’input.datePicker3’).daterangepicker();
$(’input.datePicker4’).daterangepicker();
});

<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" />

Comment by SteveA on 02/03  at  02:34 PM

Hi,

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,

Tony

Comment by tony on 02/04  at  12:11 PM

@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

Comment by Scott (Filament) on 02/04  at  12:54 PM

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?

Tony

Comment by tony on 02/04  at  01:15 PM

Hi

how can get a specific theme from her
http://www.filamentgroup.com/examples/daterangepicker_v2/

and remove the left side (just show calender)

Comment by Sami on 02/10  at  05:58 AM

@Sami - If you just want a simple calendar picker, use the jQuery UI datepicker plugin instead: http://jqueryui.com/demos/datepicker/

Comment by Todd (Filament) on 02/10  at  09:51 AM

Yes this What wanted but how you can select specific them in the link the them in the orange color and in this link
http://jqueryui.com/demos/datepicker/default.html
the them color gray how can make this

Comment by Sami on 02/16  at  05:00 AM

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.

Comment by brett on 02/16  at  10:26 PM

Here is the code example. http://tinyurl.com/yhhpgoy - 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.

Comment by brett on 02/17  at  02:12 PM

Hey guys, I figured it out. If you want the date range to display by default use:

$(function(){
$(’input’).daterangepicker({arrows:false});
$(’input’).click(function() {
$(’.ui-daterangepicker:visible .ui-daterangepicker-dateRange’).click();
});
});

Comment by brett on 02/18  at  02:18 PM

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?

Thanks

Comment by Steve on 02/18  at  02:38 PM

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
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().show(400);

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

Comment by Matthew Scott on 02/19  at  06:14 AM

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.

Comment by Matthew Scott on 02/19  at  06:15 AM

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.

Comment by alaa9jo on 02/23  at  10:09 AM

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:
$(function(){
$(’#startdate, #enddate’).daterangepicker({
dateFormat: ‘D M d, yy’
});
});
Any help on what I need to do would be greatly appreciated.

Comment by blorriman on 02/24  at  01:16 PM

blorriman,
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

Comment by Matthew Scott on 02/26  at  04:03 AM

Hi!

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 http://jqueryui.com/demos/datepicker/ 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
Fernandos

Comment by Fernandos on 03/01  at  04:43 PM

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.

Comment by Peter on 03/02  at  12:31 AM

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

Comment by Ceana Razvan on 03/04  at  07:52 AM

This daterangepicker is showing up behind select boxes in IE 6.  The daterange jquery ui plugin works fine, but when changed to daterangepicker it’s behind select boxes.  Is something with bgiframe not working with daterangepicker?

Comment by Jeremy on 03/07  at  05:05 PM

@Jeremy I don’t want to be rude, but do everyone a favour and stop supporting IE6.

Comment by ChazUK on 03/07  at  05:13 PM

Hi,

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:
$(‘.range-end’).val()
$(‘.range-start’).val()

does not work and gives me the same issue.

lleto

Comment by lleto on 03/08  at  04:03 PM

Hi,

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();
//alert(dates);
// this gives you the exact information as it is in the input box

// run your code here

clearTimeout(t);
};

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

Comment by lleto on 03/08  at  04:30 PM

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);

//defaults
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’ },
//extras:
{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: http://docs.jquery.com/UI/Datepicker/&#x24;.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’)) {
rangeInput.val(options.clearValue);
return;
}

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) {
rangeInput.eq(0).val(rangeA);
rangeInput.eq(1).val(rangeB);
}
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’) && !rp.is(’:animated’)) {
hideRP();
}
}
options.onChange();
},
defaultDate: +0
};

//change event fires both when a calendar is updated or a change event on the input is triggered
rangeInput.change(options.onChange);

//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)
.appendTo(ul);
});
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); }
else
{ 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); }
x++;
});

Second Part:
//preset menu click events
jQuery.fn.clickActions = function(rp, rpPickers, doneBtn) {

if (jQuery(this).is(’.ui-daterangepicker-specificDate’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.presets.specificDate);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-end’).text(options.presets.allDatesBefore);
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
rp.find(’.range-end’).restoreDateFromData().show(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.presets.allDatesAfter);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-dateRange’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.rangeStartTitle);
rp.find(’.title-end’).text(options.rangeEndTitle);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().show(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-clear’)) {
doneBtn.hide();
rpPickers.hide();
rp.find(’.ui-datepicker-current-day’).trigger(’click’);
}
else {
//custom date range
doneBtn.hide();
rp.find(’.range-start, .range-end’).hide(400, function() {
rpPickers.hide();
});
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!

Comment by alaa9jo on 03/09  at  03:02 AM

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.

Comment by James Alvarez on 03/10  at  08:57 AM

I am also getting this in IE8/Win7/64

Line: 126
Char:4
‘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?

Comment by Stephen on 03/21  at  03:03 AM

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.
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html

Comment by Praveen Battula on 03/25  at  10:29 PM

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(rp.data(’state’) == ‘closed’){
rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

rp.data(’state’, ‘open’);
rp.fadeIn(300);
options.onOpen();
}
}

I hope this helps some people. Just wanted to share my experience.

Comment by Bazmo on 03/25  at  11:29 PM

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

Comment by Raccoon on 03/27  at  10:44 AM

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’

Comment by Raccoon on 03/27  at  10:46 AM

@Raccoon: Thanks! Good tip. Hopefully we can get that into the source soon!

Comment by Scott (Filament) on 03/30  at  10:29 AM

Try to show march month on this year (2011,2016,2022).
it just show the first five day

Comment by Sami on 03/31  at  02:58 AM

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!
thanks

Comment by bitlink web on 03/31  at  01:09 PM

... I see that is actually fixed on the example opening in a new page

Comment by bitlink web on 03/31  at  01:11 PM

I’ve become a big fan of yours, is is so damn excellent. Thanks for sharing it mate.

Comment by Nauman Akhtar on 04/02  at  03:10 AM

hey - still having difficulty making this work with IE7:

Calling via:

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

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? :-(

Comment by Stephen on 04/05  at  02:41 AM

How do I remove/disable some of the presets?

Comment by valya on 04/05  at  12:46 PM

I tried using this with datepicker 1.8.  Doesn’t appear to work.  Any idea when it might get updated (or where I might look to fix it myself)?

Comment by Scott on 04/06  at  06:17 PM

@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?

Comment by Alex on 04/06  at  10:31 PM

It doesn’t do anything.  I looked with FB and found a hidden div at the end of the <body> with an id of “ui-daterangepickercontain”.  So, I believe the datepicker code is being called on the right element.  However, when I click in the text input box, nothing happens.  FB doesn’t report any code errors, missing functions, etc.  Just doesn’t do anything.  I’m loading jquery 1.42, ui.core, ui.widget, and the 1.8 datepicker (so, not the entire jquery-ui file).  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?

Comment by Scott on 04/07  at  11:10 AM

More information.  I happened to try this in Chrome.  Now I see the issue.  The drop-down list is opening in the wrong place (it was at the very bottom of the page in Chrome).  I see the same is true in FF.  It was being hidden by FB before.  It’s literally opening below the last visible item in the body with a left value of 0px.  I suspect it’s computing the location where it should open when I call daterangepicker() and the div it is in is hidden.  I’ve seen this before.  I would argue that it should be computing the location in the click event just before the class is added to make it visible.  So, it appears to not be a 1.8 problem.

Comment by Scott on 04/07  at  03:01 PM

@Scott:

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.

Comment by Alex on 04/07  at  10:30 PM

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

Comment by Chali on 04/08  at  09:57 AM

Solved. Nothing to do with the Calendar. I inserted a parameter in the flash control.

so.addParam("wmode", “opaque");

Thank you anyways

Comment by Chali on 04/08  at  10:24 AM

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.  xD Will you repair this BIG BUG ?

Comment by MrHappy on 04/09  at  03:25 AM

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.

Comment by Alexey on 04/11  at  12:55 PM

This thing is pretty darn cool. Excited to see updates too. Glad you guys used the jQuery themeroller.

Comment by chris on 04/11  at  01:47 PM

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 ?

Comment by chris on 04/13  at  06:08 PM

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});
.............

Comment by chris on 04/13  at  06:14 PM

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 : http://www.krisszone.com/images/right-range.png

This could be enhanced for using X/Y positionning (I deleted it in my implementation) and position tool (of course both are exclusive)

Comment by chris on 04/15  at  04:02 PM

Is it possible to add custom dates in the form ‘+7 days from selected’ and allow for the user to select a start date?

Comment by sjc on 04/20  at  08:26 AM

It’s ok, I’ve worked out how to do it - thanks for a great picker.

Comment by sjc on 04/20  at  09:20 AM

Thanks for this great calendar plugin. we are using this in one of our cakephp project.

Comment by neel on 04/23  at  07:44 AM

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.

Comment by Vince on 04/23  at  09:26 AM

@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!

Comment by Scott (Filament) on 04/23  at  10:05 AM

here’s my implementation of first/end restriction

change
else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
....
rp.find(’.range-start’).restoreDateFromData().show(400)
.datepicker(’setDate’,inputDateA);
rp.find(’.range-end’).restoreDateFromData().show(400)
.datepicker(’setDate’,inputDateB);

with

else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
....
rp.find(’.range-start’).restoreDateFromData().show(400)
.datepicker(’setDate’,inputDateA)
.datepicker("option", “maxDate”, rp.find(’.range-end’).datepicker(’getDate’));
rp.find(’.range-end’).restoreDateFromData().show(400)
.datepicker(’setDate’,inputDateB)
.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.

Comment by chris on 04/23  at  11:44 AM

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.

Comment by Shaun on 04/23  at  04:21 PM

“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!

Comment by Stephen on 04/23  at  04:35 PM

I had this issue once before and took me hours to debug. IE Sucks!
Will never forget that though.

Comment by Vince on 04/24  at  05:39 AM

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…

Comment by stephane on 04/27  at  10:35 AM

When I enter in a Range of ‘{text: ‘Yesterday’, dateStart: ‘Yesterday’, dateEnd: ‘Yesterday’ }’ I get an unexpected result.  I get the date range with splitter of yesterday’s date to today’s date.  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?

Comment by Jon on 04/28  at  10:10 PM

impressive, it’s just that it’s not what i’m looking for.
good work.

Comment by Adam on 04/29  at  09:40 PM

Hi
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
Thanks
Kunal

Comment by kunal on 05/05  at  07:19 AM

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

Comment by Scott (Filament) on 05/05  at  08:46 AM

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?

Comment by Josh on 05/05  at  04:51 PM

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.

Comment by Josh on 05/05  at  06:00 PM

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!

Greetings

Comment by Sithlord on 05/11  at  08:34 AM

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!

Woo!

Comment by Federico Holgado on 05/16  at  08:59 AM

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(){
jQuery_1_3_2("input#userJoinDateField").daterangepicker({
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?)
Thanks,
Elad.

Comment by Elad on 05/21  at  01:05 PM

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.

Comment by Wayne on 05/25  at  12:16 PM

Wayne - look into jQuery .live() to make a jQuery response affect objects injected into the DOM.

Comment by mumu on 06/03  at  12:40 PM

daterangepicker do not respect custom dateFormat, when you change order of month/day/year.
If you set dateFormat: dd.mm.yy 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;

Comment by Jaroslav Moravec on 06/10  at  04:27 AM

this is the best date time picker yet
http://jonathonhill.net/2009-03-27/jquery-datetime-picker/

It also works gr8 with the new 1.8.2 JQuery ui and the new JQuery 1.4.2.

Comment by roy on 06/12  at  05:50 AM

Hello,

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

Comment by Muhammad Shoaib on 06/13  at  05:16 AM

@Veronika wrote> I’ve tired “onchange” but it doesn’t work ... any ideas?
Fire onChange when widget is closed. Solution rought, but it works.
http://gsm-inform.com/modules/DateRangePicker/daterangepicker.jQuery.js

Comment by SAN on 06/15  at  02:00 PM

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.

Comment by Nicholas Calugar on 06/15  at  07:01 PM

Yet another ‘Good work/Thank you very much/That’s exactly what I needed’ comment :D

Comment by prodigel on 06/23  at  03:32 AM

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.

Comment by JasonM on 06/24  at  09:36 AM

Hi guys,

it’s too good but
It’s not working with jquery-ui-1.7.2.custom.min.js

plz help .....

Comment by samir on 06/30  at  02:02 AM

NiksKniz say: Idea shaking, I support.

_____________
{<a href= http://cheap-cealis.drugs-rx.info/site_map.html >cealis
-free-prescription
2</a>

Comment by morsest on 07/02  at  09:31 AM

Hi friends how to set default date in date picker text box. i need default date is current month “Month to date” option.

Comment by Rajesh on 07/14  at  01:50 AM

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?

TIA.

Comment by dwenr on 07/17  at  11:10 PM

Hi,

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?

Regards,
Karan

Comment by karan on 07/19  at  01:25 AM

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?

$(’#date’).daterangepicker.showRP();

doesn work for me, any help?

Thanks in advance.

Comment by Diego Rin on 07/22  at  10:51 AM

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?

Thanks.

Comment by scott on 07/23  at  10:32 AM

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.

Comment by Jean on 07/23  at  03:37 PM

I’ve got it working with jQuery 1.4.2 and jQuery-UI 1.8.2. What isn’t working?

Comment by Nicholas Calugar on 07/23  at  03:48 PM

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" %>

<html>
<head>
‘>
‘ >
‘ >
‘ >
<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">


$(document).ready(function(){
$("#dateRange").daterangepicker();
});

<head>

<body>
<div id="demoHeader">
<input type="text" value="Choose a Date” id="dateRange" />
</body>
</html>

Comment by Jean on 07/26  at  12:19 PM

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?

Comment by Nicholas Calugar on 07/26  at  12:33 PM

Thank you for your reply and the browser’s source is below,

<html>
<head>



<link href="/css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<link href="/css/ui.daterangepicker.css" rel="stylesheet" type="text/css">


$(document).ready(function(){
$("#dateRange").daterangepicker();
});

<head>

<body>
<div id="demoHeader">
<input type="text" value="Choose a Date” id="dateRange" />
</body>
</html>

Comment by Jean on 07/27  at  09:33 AM

It must be cutting out your script tags...could you post the browser source to http://pastebin.com/ and then put the URL to the pastebin in a comment here?

Comment by Nicholas Calugar on 07/27  at  10:37 AM

Sorry to cause this much trouble, I posted it to pastebin and the link to it is below:

http://pastebin.com/XrmL3kis

Thanks.

Comment by Jean on 07/27  at  04:53 PM

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 files...you might have a typo in one of the paths.

Here is the code that is working for me: http://pastebin.com/TkF9CZ7V

Comment by Nicholas Calugar on 07/27  at  05:14 PM

any one can tell me how to enable drop list for year and month as shown in demo??
any help would be appreciated

Comment by Rashid on 08/03  at  06:20 AM

it would be great to have it on github!

Comment by tom on 08/04  at  03:00 PM

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.

Comment by Danny on 08/05  at  10:24 PM

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?

Comment by VizjereiX on 08/06  at  02:13 AM

Thank you for this tool!

Is there a way to use a button instead of an input field?

Cheers.

Comment by Murphy on 08/10  at  05:38 PM

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() {
setTimeout(’myOnClose_delayed’,0);
}
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.

Comment by Murphy on 08/10  at  07:22 PM

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:

$(".datepicker").daterangepicker({
presetRanges: custom_datepicker_menu,
earliestDate: Date.parse(’2010-07-01’),
datepickerOptions: {minDate: Date.parse(’2010-07-01’)
maxDate: Date.parse(’Today’)}
});

Comment by Nick on 08/13  at  12:48 PM

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.

Comment by LennyPain on 08/14  at  05:51 PM

@LennyPain:

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;
0:Sunday,1:Monday,2:Tuesday,....etc

Comment by alaa9jo on 08/16  at  02:45 AM

Excellent! Now it’s working like a charm. Thank you for your help!

Comment by LennyPain on 08/16  at  11:55 AM

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.

Comment by Johngi on 08/17  at  06:26 PM

Hello friends,

I have tried to implement date range picker control. You can get the code at this link
http://aspnet-ajax-aspnetmvc.blogspot.com/2010/09/jquery-date-range-plugin.html

Please suggest me to make it more better.

Thanks,
Mohan Prajapati

Comment by Mohan on 09/03  at  05:33 AM

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?

Comment by Kumar Saurav on 09/07  at  04:22 AM

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 - http://pastebin.com/YnktMFXb

Comment by IYS on 09/09  at  05:23 PM

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">
</span>

then modify the onClick event in the pluggin

jQuery(this).click(function(){
//calls parent so we can have more than one picker on the screen
rangeInput = jQuery(this).parent().find("input"); //calls wrapped inputs
toggleRP();
return false;
});

Comment by Darren on 09/09  at  05:40 PM

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

$("input").daterangepicker({
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
})
});

Comment by Darren on 09/09  at  05:44 PM

I might sugges you change the event type from click to jQuery(this).bind("click focus”,function(){… to make visible

Comment by Darren on 09/10  at  03:43 PM

Hello,
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 ;)

Thanks

Comment by Roberto Ortelli on 09/13  at  02:30 AM

Hello,

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?

Comment by Marsil on 09/14  at  01:59 PM

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;
$("#datuman").val(datum);

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:

$("#datuman").val(datum).trigger("change");

My daterangepicker initialization (I have more optmized version of this, fewer lines, but I intentionally write it like this for better understanding):

$(’#datuman’).daterangepicker({
arrows:true,
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();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
},
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();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
}
});

Now, everything is working as I wanted, start and end date are always highlighted with the proper values from input field.

Regards

Comment by Bosko on 09/16  at  06:56 PM

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();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
},
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();
}
$(”.preset_3").trigger("click");
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
}

Regards

Comment by Bosko on 09/16  at  07:11 PM

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)

Comment by Observative on 09/23  at  11:58 PM

Nice Project! But there’s a bug in daterangepicker.jQuery.js on line 145.

All activated dates will be removed with this line:

rp.find(’.ui-state-active’).removeClass(’ui-state-active’);

This has to change, because activated dates in the calendar may not be removed: Change to:

rpPresets.find(’.ui-state-active’).removeClass(’ui-state-active’);

Regards Jens N.

Comment by Jens Neumann on 09/29  at  03:16 AM

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:
...
$(’#range_a’).datepicker
...
and

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

Thanks!

Comment by C S R on 09/29  at  03:39 PM

Can anyone tell me how to integrate time to this such a cool plug-in?

Comment by beeko on 10/01  at  09:13 PM

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..?
Thanks!

Comment by eyalec on 10/03  at  08:00 AM

Disregard that. I was using server textboxes…
It works great! thx.

Comment by eyalec on 10/03  at  08:21 AM

A little hack to select date range by default and mark the input dates as selectable:

First change: restoreDateFromData

jQuery.fn.restoreDateFromData = function( first ){
if(jQuery(this).data(’saveDate’)){
jQuery(this).datepicker(’setDate’, jQuery(this).data(’saveDate’)).removeData(’saveDate’);
}
else{
jQuery(this).datepicker(’setDate’, first?inputDateA:inputDateB);
}
return this;
}

Second change: showRP

function showRP(){
if(rp.data(’state’) == ‘closed’){
rp.data(’state’, ‘open’);
rp.fadeIn(300);
options.onOpen();
rp.find(’.ui-daterangepicker-dateRange’).click();
}
}

Third change: clickActions

jQuery.fn.clickActions = function(rp, rpPickers, doneBtn){
if(jQuery(this).is(’.ui-daterangepicker-specificDate’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text( options.presets.specificDate );
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).restoreDateFromData(false).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-end’).text( options.presets.allDatesBefore );
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
rp.find(’.range-end’).restoreDateFromData(false).show(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text( options.presets.allDatesAfter );
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.rangeStartTitle);
rp.find(’.title-end’).text(options.rangeEndTitle);
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).restoreDateFromData(false).show(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else {
//custom date range
doneBtn.hide();
rp.find(’.range-start, .range-end’).hide(400, function(){
rpPickers.hide();
});
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 ^^.

Comment by Aldo_MX on 10/05  at  11:40 AM

*mark the input dates as selected (sorry)

Comment by Aldo_MX on 10/05  at  11:41 AM

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.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)
.appendTo(ul);
});

(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);
jQuery.each(options.presetRanges,function(){

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)
.appendTo(ul);
}
});

I hope that it helps someone else!!

Regards

Comment by Gray on 10/05  at  03:29 PM

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).  Is there a way to hang this date range picker off a div instead of an input field?

Comment by Benjamin Nolan on 10/08  at  06:05 AM

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?

Comment by Benjamin Nolan on 10/08  at  06:07 AM

Hi,
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 ?

Comment by ginnn on 10/18  at  10:50 AM

I tried this in var datepickerOptions :

if(rp.find(’.ui-daterangepicker-dateRange’).is(’.ui-state-active’)){
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....

Comment by ginnn on 10/18  at  11:24 AM

Is there a way to set the max date range dynamically?

Comment by Josh on 10/23  at  02:04 PM

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);

Comment by rakesh on 10/26  at  02:38 AM

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!)

Comment by Canadaboy on 10/26  at  02:52 AM

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(rp.data(’state’) == ‘closed’){
rp.data(’state’, ‘open’);
rp.fadeIn(300);
options.onOpen();
}
}

What we are doing is adding the following line:
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

Comment by Canadaboy on 10/26  at  03:55 AM

Very good if the next version support :
- French translation or Change Days / Months in other language

Comment by basur on 11/02  at  04:09 AM

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.

Comment by DEN on 11/03  at  04:11 AM

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.  The parameter is “daysInRange”.  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.  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.

Comment by Samuel Brasington on 11/17  at  01:41 PM

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?

Comment by Todd Ryks on 11/17  at  06:51 PM

Doesn’t work in Opera 10 with jQuery 1.4.4 :(
This is the latest to date.

Comment by SAN on 11/19  at  02:29 AM

I really like your plugin, but was wondering about non-sequential date picking.  Any ideas where to start to implement something like this?

Comment by Chris on 11/22  at  03:54 PM

@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:

$(’#datePicker’).copyEventsTo(’#openCalendarImage’);

Also, if you *don’t* want the calendar to open up by clicking the textbox, just remove the events :

$("#datePicker").unbind();

Comment by Shaun on 11/24  at  12:04 PM

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?

Comment by davidv on 11/29  at  04:36 AM

Comment by guest on 11/30  at  07:38 AM

Hi all.
Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).

Comment by sigara bırakma on 12/01  at  06:00 AM

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?

Thanks

Comment by Pete on 12/07  at  06:05 AM

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?

Comment by John on 12/09  at  09:11 PM

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 (rp.data(’state’) == ‘closed’) {
rp.data(’state’, ‘open’);
rp.find(”.ui-datepicker").css("display", “inline-block"); //Changed by Daniel
rp.fadeIn(300);
options.onOpen();
}
}
function hideRP() {
if (rp.data(’state’) == ‘open’) {
rp.data(’state’, ‘closed’);
rp.find(”.ui-datepicker").css("display", “none"); //Changed by Daniel
rp.fadeOut(300);
options.onClose();
}
}

hope thats help

Comment by Daniel Jaffe on 12/16  at  11:26 AM

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.

Arnold

Comment by Arnold Roa on 12/27  at  06:23 PM

Sexy. This made my evening, Thank You!

Comment by Christopher on 12/27  at  08:43 PM

Thanks a bunch Daniel Jaffe, you saved my butt on this one!

Comment by Tyler Eckberg on 12/29  at  05:43 PM

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’);//de.click enough
de.trigger(’click’);

Comment by LudoO on 01/19  at  05:42 AM

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

Comment by Richard Korebrits on 01/21  at  04:39 AM

Has anyone attempted to incorporate the time add-on from the Trent Richardson, http://trentrichardson.com/2010/04/19/timepicker-addon-for-jquery-ui-datepicker/, with this daterange picker?

Comment by John on 01/25  at  02:15 PM

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.

Comment by Todd on 01/26  at  01:29 PM

Same problem as Todd. It works in Firefox but ot in IE, Chrome or Safari. Using jquery-ui-1.8.9

Comment by Rodrigo on 02/03  at  03:45 AM

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
dc.daterangepicker();
$(".ui-daterangepickercontain").css( {’left’:’auto’,’right’:right+’px’} );
**************

Comment by steve on 02/03  at  05:36 AM

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.

Comment by Todd on 02/03  at  10:52 AM

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 : http://coumont.fr/archives/FilamentGroup_daterangepicker_bugfix.zip (see file js/daterangepicker.jQuery.new.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.

Comment by Etienne Coumont on 02/06  at  06:03 AM

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

Comment by carlos on 02/09  at  02:59 AM

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

$(’selector’).GetDateFrom();
$(’selector’).GetDateTo();

or something smiler.

Comment by Shurid on 02/15  at  10:19 AM

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.

Comment by Haresh Vidja on 02/16  at  12:12 AM

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

Comment by Alex on 02/21  at  12:40 PM

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

Comment by Reshab on 02/25  at  11:25 PM

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

Thanks,
Vikrant

Comment by Vikrant on 03/03  at  04:43 PM

@Vikrant

You can customize your Theme from left panel settings in Roller from http://jqueryui.com/themeroller/

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

Thanks,
Haresh

Comment by Haresh on 03/04  at  02:26 AM

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!

Comment by Gudata on 03/07  at  11:33 AM

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

Comment by Mohan Ram on 03/09  at  01:08 AM

Hi Mohan Ram
Simply You have to use onClose function… because I also faced this problem ;)

Comment by Haresh on 03/09  at  04:25 AM

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

Comment by staytouch on 03/09  at  04:31 AM

@Etienne Thanks dude..  Was banging my head on the keyboard for awhile on that one!

Comment by Paul Vernon on 03/09  at  11:57 AM

How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page same qustion

Comment by Wibawa on 03/10  at  11:18 AM

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.

Comment by staytouch on 03/15  at  12:59 AM

prev and next event not work onchange event

Comment by arunkumar.p on 03/18  at  12:38 AM

It worked for me ,thanks :)

Comment by Wordpress Developer on 03/20  at  11:21 AM

is this still working

Comment by Evan on 03/22  at  02:53 AM

Thaks for the post

Comment by Eric on 03/22  at  04:03 AM

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:

$(’#time’).daterangepicker({
datepickerOptions: {
showOn: “button”,
buttonImage: “images/calendar_icon.gif”,
buttonImageOnly: true
}
});

Suggestions?

Thanks!

Comment by Kate on 03/27  at  11:20 PM

Hi,

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.

Thanks!

Comment by Luigi on 03/31  at  07:59 PM

Hi, check out our jQuery Event Calendar: http://www.dcs-solution.com/blog/?p=22#more-22

Comment by DCS Solution on 04/14  at  08:22 AM

Hey, DCS Solution, this is promotion for a product that’s not even available yet! Is this a joke?

Comment by Luigi on 04/14  at  09:13 AM

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.

Comment by DCS Solution on 04/14  at  09:19 AM

Hi,

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.

Regards,
Selvi

Comment by selvi on 04/16  at  04:52 AM

I tested it with jquery-ui-1.7.2.custom.min.js, but don’t work. Anyone?

Comment by Joel Lazzari on 04/16  at  04:26 PM

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.

Comment by Travis on 04/19  at  10:24 PM

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

Comment by Luigi on 04/20  at  08:54 PM

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);

Comment by Dave on 04/28  at  08:06 AM

Kate and Viðar are correct.  datepickerOptions doesn’t work when using a button to bring up the datepicker (showOn, buttonImage, & buttonImageOnly).  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. 

I doubt anyone has a solution however.

Comment by jc on 04/28  at  10:24 AM

I found a solution for using an image to open the daterangepicker.
1.  Add an img tag with an id and its src
source.png
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() {
toggleRP();
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
jQuery(this).click(function(){
---->>>>//toggleRP();
return false;
});

Comment by jc on 04/28  at  02:10 PM

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!

Comment by Livestate on 05/03  at  04:12 AM

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.

Comment by Tom R on 05/11  at  06:30 AM

Hi,

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.

Comment by Adam Fekete on 05/17  at  09:39 AM

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:

$(’input.date’).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.

Comment by Adam Fekete on 05/17  at  09:54 AM

@jc - the code you posted for using an image to launch the datepicker worked beautifully! Thank you for posting :)

Comment by Kate on 05/18  at  12:17 AM

It would be useful if you’d link here to your github repository for this plugin (as @tom requested): https://github.com/filamentgroup/jQuery-UI-Date-Range-Picker

Comment by n0nick on 05/18  at  03:12 AM

I really need to have the datepickers expand left instead of right. Isn’t it possible?

Comment by Sune Westphalen on 05/19  at  09:19 AM

Has there been any progress with brad’s suggestion in the

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

?

Comment by Adam Fekete on 05/19  at  09:49 AM

Hi,

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.

Comment by Adam Fekete on 05/20  at  06:38 AM

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?

Comment by bobbytuck on 05/24  at  03:39 PM

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.

Comment by employee training and development on 05/31  at  10:08 PM

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?

Thanks

Comment by ramu on 06/10  at  01:28 AM

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?

Thanks

Comment by Ang on 06/15  at  03:01 AM

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:
jquery-ui-1.8.12.custom.css,
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js,
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js

Comment by Red on 06/19  at  02:06 AM

Previous message: sorry only on FF it’s working.

Comment by Red on 06/19  at  02:19 AM

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; }

Comment by Red on 06/19  at  02:42 AM

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:
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

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:
http://multidatespickr.sourceforge.net/

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 ?

Comment by Sven on 07/02  at  05:57 PM