menu

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

<p>@Volomike: They should be in good shape now. The iframes are transparent and hopefully unnoticeable.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Teo
on 01/07 at 12:14 PM

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

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

Thanks

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

David Rodriguez
on 01/08 at 09:50 AM

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

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

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

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

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

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

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

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

David Rodriguez
on 01/08 at 03:11 PM

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

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

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

David Rodriguez
on 01/09 at 03:23 PM

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

<p>@David:&nbsp; one possible solution is to use the ‘onOpen’ option to trigger a click, something like:

<p>@firefly:&nbsp; You can use the appendTo, posX, and posY options to configure that to your needs.

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

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

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

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

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

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

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

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

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

FF3 OS X

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

Tim Yates
on 01/16 at 05:58 PM

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

<p>This is awesome! Great in FF3!

But in IE8 with even compatibility mode gives bugs…

Btw really awesome contribution wow!

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

James
on 01/16 at 10:03 PM

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

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

Kepe it up!

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

Brad Fimore
on 01/16 at 10:19 PM

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

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

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

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

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

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

<p>There are problems with month To date &amp; Years to date on the Demo. It’s not the good date

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

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

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

<p>@TimYates: Thanks, we’ll check that out. It’s only an issue with our demo pages though, not the plugin itself.

@James: Interesting. We will test.

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

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

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

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

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

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

justin
on 01/20 at 04:32 PM

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

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

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

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

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

<p>Will the following code restrict the picker to 2 text areas?

$(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…

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

justin
on 01/20 at 04:49 PM

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

<p>@justin: combine those selectors into one and you should be okay.

$(’#range1, #range2’)

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

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

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

<p>I can select Jul 31, 2009 to Jun 1, 2009

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

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

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

chris catton
on 02/05 at 07:56 AM

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

<p>ok, it does work with 1.3 - at least somewhat.&nbsp; But if I modify your sample page to

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

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

chris catton
on 02/05 at 09:12 AM

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

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

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

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

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

frank
on 02/05 at 10:44 AM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

frank
on 02/05 at 11:48 AM

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

<p>@Scott - thanks for the response - and good luck with the release - fyi the error above is with jquery 1.3.1 and UI 1.6rc6

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

chris catton
on 02/05 at 11:50 AM

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

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

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

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

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

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

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

Thanks!

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

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

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

<p>Hi scott

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

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.

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

David Rodriguez
on 02/12 at 03:41 PM

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

<p>Hi scott,

I spent some time today digging through the daterangepicker code trying to work out why two pickers on the same page won’t play nice. I didn’t get to the bottom of it, but there seem to be two problems. The first is fairly trivial - in the jQuery.fn.clickActions function I need to call 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?

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

chris catton
on 02/12 at 06:45 PM

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

<p>Thanks Chris. Thanks for taking a look at the source.

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

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

Thanks :)

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

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

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

<p>Hi scott

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

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

<p>@ chris catton: Thanks! I’ll take a deeper look based on what you’ve sent.

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

@Bob: Yes. It’s because your theme is using EMs for font-size units and it is written assuming 1em=10px. You have a couple options:
A. Set your body element’s font size to 62.5%. This will override your browser’s default font size of 16px and make 1em = 10px.
B. Go to 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.

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

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

regina
on 02/18 at 06:36 PM

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

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

$(’input.rangeA’).click(function() {
$(’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.

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

regina
on 02/20 at 03:45 PM

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

<p>Hey thanks for this, I have it installed and had to tweak it a bit. See working example of it running in a big search form I had to change appendTo from default Body to a ID div. works a treat check it out <a href="http://www.world-holiday-rentals.com/advancedsearch.html" rel="nofollow">http://www.world-holiday-rentals.com/advancedsearch.html</a>

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

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

asaf
on 02/23 at 01:11 PM

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

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

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

Souhail Jabbour
on 02/25 at 01:22 AM

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

<p>It would really helpful if posX and posY options accepted a function… and/or if options could be updated after initial setup.

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

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

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

nerkles
on 02/27 at 03:01 PM

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

<p>great job on the datepicker!!! love it!

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

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

Azadi Saryev
on 03/06 at 12:23 PM

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

<p>Hey guys,

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

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

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

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

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

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

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

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

Mike McNally
on 03/24 at 03:00 PM

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

<p>Thanks Mike. Fixed now.

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

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

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

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

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

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

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

Other than that, great work. :)

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

AKX
on 03/26 at 09:43 AM

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

<p>I have recently started looking into this plug in. which by the way is everything i’m looking for great job team! my only problem at this point and i’ve kinda done some searching. i would rather onselect="this.form.submit" but i am unsuccessfull at this point and have been forced to add a submit button. my code is as follows if there is anyone who could possibly point out any 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.

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

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

Could someone shed some light on this? Thanks

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

Hokagenz
on 03/29 at 09:29 PM

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

<p>Hi,

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

Thank you for a nice plugin.

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

John Emmanuel
on 03/30 at 06:46 AM

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

<p>Error in daterangepicker.js - function fDate(date) the date parameter is null. This happens when i select the end date first..

Please fix it.

Thanks for the good calender plug in :)

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

Murali
on 03/31 at 07:00 AM

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

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

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

Veronica
on 03/31 at 08:10 PM

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

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

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

Nischal Shetty
on 04/01 at 12:15 AM

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

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

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

Nischal Shetty
on 04/01 at 12:36 AM

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

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

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

Jeremy
on 04/05 at 12:59 AM

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

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

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

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

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

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:

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!

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

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

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

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

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

Bec
on 04/07 at 02:44 AM

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

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

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

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

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

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.

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

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

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

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

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

“24th Dec 2009 to 2nd April 2009”

which shouldnt really be possible.

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

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

Herr Kaiser
on 04/15 at 11:46 AM

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

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

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

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

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

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

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

WadeO
on 04/16 at 03:54 PM

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

<p>I’m having a few problems getting the datepickers to show the dates that are in the inputs at page load.

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

Thank you for the help and congrats for this tool!

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

HT
on 04/17 at 09:59 AM

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

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

@João: I didn’t see any datepickers in your demo page, but like I said, based on your list above, I think you need the “datepicker” plugin from jQuery UI. Our plugin depends on the jQuery UI datepicker. You can download it at 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?

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

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

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?

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

Philip Pond
on 04/20 at 07:18 PM

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

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

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

Tiffany
on 04/22 at 10:18 AM

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

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

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

Tiffany
on 04/22 at 10:23 AM

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

<p>It’s possible just to show one preset without the menu?

Excellent work though and Thanks in advance !

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

Pablitt
on 04/22 at 03:54 PM

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

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

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?

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

Tiffany
on 04/24 at 12:40 PM

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

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

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

Tiffany
on 04/24 at 03:54 PM

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

<p>Is it possible to set first day of week to Monday?

datepicker default option firstDay not working ;(

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

Mastyf
on 04/25 at 06:39 PM

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

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

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

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

Tiffany
on 04/27 at 10:58 AM

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

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

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

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

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

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

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

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

Tiffany
on 04/27 at 12:05 PM

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

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

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

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

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

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

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

Tiffany
on 04/27 at 02:59 PM

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

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

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

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

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

<p>Everyone: The date range picker’s onOpen and onClose events should be fixed now so that they only fire once when they’re called.

Grab the latest zip for the updated file.
Thanks!

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

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

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

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

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

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

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

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

<p>Thanks a lot for ur script…

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

Thanks,
RathikaPoobalan

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

RathikaPoobalan
on 05/05 at 08:50 AM

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

<p>I just downloaded this today.&nbsp; On lines 109 and 114 you have:

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

is that code really useful?

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

Matt
on 05/07 at 02:41 PM

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

<p>Feature to add :

Multi date selection highlights

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

shamun toha
on 05/10 at 07:09 AM

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

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

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

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

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

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

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

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

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.

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

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

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

<p>I got it working in IE by setting the preset Ranges rather than leaving it default.&nbsp;

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

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

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

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

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

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

<p>Two enhancement requests - really the same idea to be able to select multiple dates.

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

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

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

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

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

Neil
on 05/22 at 12:09 PM

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

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

Any thoughts?

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

Joshua Lippiner
on 05/23 at 02:24 PM

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

<p>Hi Scott,

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

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.

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

Yehuda
on 05/25 at 09:20 AM

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

<p>I found a temporary fix for the problem I listed above:

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

<p>In my first message I forgot to say that the script is great after all.

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

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

Rodrigo
on 06/02 at 07:04 AM

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

<p>I think my first message was lost. I’ll try to write it again.

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

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

Rodrigo
on 06/02 at 02:19 PM

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

<p>I’m having the same dates problem here, i set the following settings:

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

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

alex
on 06/02 at 04:08 PM

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

<p>I had to namespace the plugin for it to work with jquery 1.3.2.

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

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

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

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

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

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

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

<p>@Milton: Sorry your comment got caught in our filter. You should be cleared now for future comments.

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

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

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

Mike McNally
on 06/25 at 09:12 AM

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

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

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

Mike McNally
on 06/25 at 09:18 AM

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

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

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

Mike McNally
on 06/25 at 09:20 AM

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

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

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

Mike McNally
on 06/25 at 03:07 PM

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

<p>Wonderful work!

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

jQuery(function($) {
$(’.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’.

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:

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

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!

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

JamesR
on 07/15 at 10:23 PM

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

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

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

thommy
on 07/20 at 08:59 AM

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

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

Does that make any sense?

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

Kevin
on 07/21 at 01:17 PM

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

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

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:

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

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.

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

NR
on 07/22 at 08:39 AM

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

<p>I made two changes to daterangepicker:

“onDpChange: function(){},” after line 62 and “options.onDpChange();” after line 89 in the datepickerOptions function. I was dismayed that I couldn’t overwrite the original datepicker onSelect statements, so I appended a function to it.

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

Travis
on 07/22 at 02:35 PM

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

<p>This is a really great script but I think there could be a couple of improvements! If these arn’t already options I have overlooked :)

1) A way to set default function eg range picker when clicked
2) The range picker shouldn’t let you select start dates after the end dates.
3) Highlighting of the range selected would also be very cool!

Keep it up you have restored my faith in humanity

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

cookie
on 07/29 at 07:10 PM

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

<p>Hi guys,

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

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?

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

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

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?

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

Liam
on 08/04 at 04:39 AM

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

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

I want to execute a search against a php page using a start and end date. I have the date picker set up fine with a rangeA and rangeB. My date format for the date picker is ‘MM d, yy’. I want to change the date to mm/dd/yy format and open a new page on my site in the same window so that the action is “/resultpage.php?startdate=mm&#x2F;dd&#x2F;yy&enddate=mm&#x2F;dd&#x2F;yy” on the close function. Can anybody give me some insight into how to do this? Thanks!

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

Fritz
on 08/06 at 04:08 PM

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

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

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

Fritz
on 08/06 at 04:11 PM

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

<p>Here’s a use-case for a “None” preset which clears the input field:

The input field is read only (to avoid input validation) and not mandatory.
The picker is then used for allowing all (almost) possible types for date range selection.

Since the input is not mandatory, after a date was selected, there is no way of clearing the field. We would have to provide some sort of a “clear” button that does the job.

When such button is not feasible (due to room restrictions for instance) it would be very nice to have a preset of “None” which means no selection in the range picker for clearing the input field.

Comments are really appreciated.

Regards

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

Maverick
on 08/09 at 09:12 AM

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

<p>I found that when you tab to (rather than click on) an input with daterangepicker, it didn’t trigger. I changed

<p>Apologies for all of the posts. Wanted to share this; modified my previous example to accept Shift+Tab from the input following the daterangepicker as well. Now, it will launch on input click, previous input tab, and next input shift+tab. Much more accessible to folks like me that navigate forms by keyboard :P

<p>Last one. Keep getting input from friends on bugs. This one detects if SHIFT has been pressed and held at any part of the document, instead of just the next/previous inputs. Potentially, a user can shift+tab over an input and still launch daterangepicker.

<p>Hi, first off thank you for such a great date picker tool, I really like the look and feel of it.&nbsp; I do have one question though, and after reading through all of the previous comments, while I found some similar comments none mentioned the problem i’m seeing.&nbsp; The picker works fine when being opened from the input box when a user clicks in it, however I was trying to also get it to be launched when a button is clicked.&nbsp; I have this working however the picker opens when I click the button but then immediately closes, it will only stay open when I actually click in the input box.&nbsp; I’m opening the datepicker in a seperate &lt;div&gt; as follows:

<p>Sorry if this has already been covered but I’m trying to have 2 input fields as separate instances of the daterangepicker but when I select a date range, the start date gets put in the first input, the end date into the second input. I need to have each one date range per input.

According to the comments, multiple instances has been recently added however can anyone clarify if 2 instances would require 4 text inputs because currently I’m unable to only have one input per instance.

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

Jason
on 08/27 at 05:48 PM

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

<p>Well the last thing I did should have been one of the first - VIEW THE SOURCE!

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

thanks

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

TJ
on 08/28 at 01:02 PM

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

<p>Kudos to a slick date picker.&nbsp; You guys were really thinking outside the box.&nbsp; Would be nice to have an option for just date range and 2 separate text boxes.&nbsp; Will have to play with that a while.

Did notice the date range allows you to pick an end date prior to the start date. Aug 3, 2009 to Aug 1, 2009

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

Mike
on 08/31 at 01:56 AM

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

<p>doesnt work in opera.. :(

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

Stefan
on 09/01 at 04:44 AM

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

<p>Started using this, but noticed a bug with November. The dates just never show up correctly November. Sometimes its all 1s, other times it counts to 7 and then its all 7s. It even happens on the demos on this page. Any ideas on a fix?

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

Erik
on 09/03 at 09:28 AM

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

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

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

Erik
on 09/03 at 09:41 AM

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

<p>@Erik That is an odd bug that I can’t test here (no Linux). Does it happen on the standalone demo pages too?

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

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

quim
on 09/06 at 05:34 PM

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

<p>Forgive me if im being thick,

But how do you return the dates it selected for a date range, ???

I know i could get the input value element by id, but i would like to return the startDate and endDate as two separate vars in the onClose

Anyone have an example of that, using a simple alert maybe?

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

Alex
on 09/07 at 09:22 AM

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

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

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

quim
on 09/18 at 04:10 AM

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

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

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

Chali Wires
on 09/20 at 04:14 PM

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

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

Keep up the good work!!!

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

Chali Wires
on 09/21 at 06:29 AM

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

<p>I was using daterangepicker on a jquery ui dialog. While “Close” was hiding it, ESC or clicking X would leave daterangepicker open. Until destroy() is properly implemented I am using this:

<p>I’m having a problem with the “Add Dates Before” option. It keeps defaulting as the startDate to 10/18/2009 for some reason. (Today’s date, the day of testing, is 10/02/2009). I have the most recent version of the plug-in, but only jQuery UI 1.6.4. Do I need to upgrade my jQuery UI file? If not, any tips on past experience with this issue?

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

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

carstep
on 10/07 at 01:34 PM

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

<p>Use “Date.parseExact” instead of “Date.parse” if you use different date format.

Be careful using date format with jQuery or DateJS library.

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

Albert
on 10/08 at 08:24 AM

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

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

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

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

quim831
on 10/22 at 08:54 AM

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

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

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

CC
on 10/22 at 06:02 PM

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

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

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

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

Charlie
on 12/01 at 09:07 AM

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

<p>Maybe this is a dumb question, but I’ve been reading these comments for about an hour now, and haven’t found the answer.

Within the “onClose” event, how can I get the actual date value(s) that were selected?

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

Phil Desrosiers
on 12/04 at 01:53 PM

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

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

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

Phil Desrosiers
on 12/04 at 02:00 PM

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

<p>Another question: When the range picker is within a scrollable DIV, clicking on the input shows the dropdown menu at the input’s absolute “bottom”, rather than it’s real “bottom”.

to reproduce: Take the example, put it in a container div after a couple of paragraphs, scroll the div down a bit, then click on the input box. The drop down doesn’t display correctly…

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

Phil Desrosiers
on 12/06 at 06:12 PM

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

<p>I am having a bit of trouble using this inside a form to select dates.&nbsp; I want to use this to select dates in a mysql database and when the submit button is selected the data is selected using the date picker.&nbsp; I am unable to get the dateStart and dateEnd variables.&nbsp; Can anyone assist?

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

Timms
on 12/10 at 10:00 AM

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

<p>I was able to retrieve data from the database usins the selector, however how can I add functions that will allow me to choose last 7 days, last month, current month?&nbsp; Here is the current code I have.

<p>Scratch my previous post, I was able to get it working.&nbsp; Awesome work on this by the way.

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

Timms
on 12/11 at 08:08 AM

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

<p>Couple of days back, I started using Filament date picker. I found the stuff is very useful and effective. I have couple of doubts regarding datepicker. I hope some one can help me out.

* I need to disable all the dates after today [ eg: if today is 11-dec-2009, all dates after 11th should me made invisible or by disabling click event
* I also need to start from particular year and month [eg: March: 2008 ....]

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

Philip
on 12/11 at 08:09 AM

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

<p>It’s not working property of earliestDate, latestDate, so I made the following changes to work:

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

Thanks!

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

Greg
on 01/15 at 11:56 AM

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

<p>Is this compatible with jQuery 1.4?

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

Timms
on 01/19 at 11:59 AM

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

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

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

Pasci
on 01/20 at 05:09 AM

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

<p>I’m using datepicker - great app.&nbsp; I need the calendar to display certain dates in different colors if we have home/away games.&nbsp; Is there a way to feed dates prior to the calendar displaying that will change the background-color for these specific dates?&nbsp; I’ll talk with some javascript programmers to see if they can write some script to modify the ui for this, but was wondering if anything was in the works for future versions that may do this.

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

LG
on 01/20 at 10:51 PM

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

<p>Has anyone managed to figure out how to get the “Date Range” to show by default without having to click from the dropdown menu?

It would be amazing to have the 2 calendar screen pop straight down from the input box.

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

ian
on 01/21 at 06:23 AM

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

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

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

varun
on 01/22 at 01:12 AM

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

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

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

supster
on 01/29 at 06:03 PM

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

<p>about the “how can i show only the range part of the plugin without showing the left menu”, heres what i do:

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

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

Varunkumar
on 02/02 at 11:43 PM

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

<p>Thanks but what you are suggesting is something I had already tried.&nbsp; The problem is that if you have datepickers in a vertical column and you start at the bottom column and click once on each that the pop-ups overlap each other and the current one clicked does not go away when you click on the one above it.

You can see that if you take the download and in the example replace the function and input with what’s below:

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

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

tony
on 02/04 at 12:11 PM

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

<p>@tony: it’s beyond the scope of this article, but I’d imagine you could find that pretty easily in PHP by splitting the query parameter’s value into an array using the rangeSplitter character (which defaults to “ to “).

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?

I tried the code you provided above to no avail. Please help. I am a newbie.

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

brett
on 02/16 at 10:26 PM

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

<p>Here is the code example. <a href="http://tinyurl.com/yhhpgoy" rel="nofollow">http://tinyurl.com/yhhpgoy</a> - Basically I want the “date range” to show up by default when the user clicks to open it. Can some please tell me how to do it? I spent a long time trying to figure it out and could not get it to work. Thank you.

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

brett
on 02/17 at 02:12 PM

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

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

<p>I would still like to use multiple date range picker controls on the same page and in fact just yesterday had another application for that but unfortunately it still isn’t supported and best I can tell isn’t actively being worked on.

Can we get an update if and when this may be feasible?

Thanks

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

Steve
on 02/18 at 02:38 PM

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

<p>I’ve been having a few issues with the date range picker, namely with limiting dates and pre-date selection.

I’ve found the code which will do both individually, but not together.

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

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

Matthew Scott
on 02/19 at 06:14 AM

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

<p>It would also be good if the above limitations could affect the other picker.

For example the date end cannot be before the date start and vice versa.

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

Matthew Scott
on 02/19 at 06:15 AM

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

<p>How to change the location of the daterange picker?

here is the issue :

if the input textbox is in the far right side of the screen,when I click on it,a menu appear with options like (daterange,days before,..etc) now when I click on the pointer next to them (so I can choose a date),the daterangepicker is wrapped and appears at the bottom of the menu,I don’t want that,I want it to appear to the left) which means that the direction of the cursors must be changed too,how I can fix this?

it’s easy to reproduce the behavior,just put the input to the far right side of the screen and play it.

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

alaa9jo
on 02/23 at 10:09 AM

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

<p>Setting today as the minDate (earliestDate).

I’ve using Date Range and it works great - but I want today to be the earliest possible date. I’ve read through all these comments and I can’t figure out how to do this. I’m using everything ‘out of the box’ (no changes to the code) and this is my script:
$(function(){
$(’#startdate, #enddate’).daterangepicker({
dateFormat: ‘D M d, yy’
});
});
Any help on what I need to do would be greatly appreciated.

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

blorriman
on 02/24 at 01:16 PM

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

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

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

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

Matthew Scott
on 02/26 at 04:03 AM

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

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

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

Fernandos
on 03/01 at 04:43 PM

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

<p>How do you use the posX to align the dropdown to the right of the input box and/or anchor the right of the dropdown box instead of the left - I want to be able to have the single date and date range slide to the left of the dropdown instead of the right.

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

Peter
on 03/02 at 12:31 AM

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

<p>One suggestion for updating this very useful script. I need to add an onChange event when i click the menu “Today, Last 7 days, etc” to position the datepicker container to absolute center. I`ve added at line 245 (in jQuery.fn.clickActions funtion at the end, before return) the line setTimeout(function(){options.onChange();}, 400);

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

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

Jeremy
on 03/07 at 05:05 PM

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

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

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

ChazUK
on 03/07 at 05:13 PM

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

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

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

lleto
on 03/08 at 04:03 PM

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

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

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

<p>SOLUTION FOR: When onClose event has been triggered, only the first date is updated. After then onClose event, the second date will update. This is a problem when we try to do Ajax inside onClose event. Only the first date is being changed and sent to server. This is using the one textbox for both dates.

SOLUTION: Open the JS file jquery.daterangepicker.js, look for the comment “//custom date range”. From that comment line, go to 7th line. look for:

<p>I was having problems with the Date Range Picker being selected from a UI Dialog which is, when the page is rendered, at the bottom of the page. To fix this I changed the appendTo property as discussed above to the element that was calling the DRP however this now makes the DRP conform to the size of the UI Dialog which is not ideal as the DRP needs a variable width. To fix this problem I reverted the appendTo fix so that the DRP is appended to the body element however I change the showRP function to set the CSS left and top properties like so:

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.

<p>It doesn’t do anything.&nbsp; I looked with FB and found a hidden div at the end of the &lt;body&gt; with an id of “ui-daterangepickercontain”.&nbsp; So, I believe the datepicker code is being called on the right element.&nbsp; However, when I click in the text input box, nothing happens.&nbsp; FB doesn’t report any code errors, missing functions, etc.&nbsp; Just doesn’t do anything.&nbsp; I’m loading jquery 1.42, ui.core, ui.widget, and the 1.8 datepicker (so, not the entire jquery-ui file).&nbsp; I’m calling with the line of code $("#daterng").val("I’m here").daterangepicker();

The val tells me I’m adding it to the right text box (it didn’t work before I added the val()). fyi--this text box is in a hidden div initially. Would that cause a problem?

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

Scott
on 04/07 at 11:10 AM

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

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

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

Scott
on 04/07 at 03:01 PM

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

<p>@Scott:

On line 181 inside the showRP() function you could include 4 lines like:

<p>I have a small problem. The Calendar is next to flash animation and when maximizing the two calendars, the flash animation covers the calendars.

Now I can reposition the calendar, but its nicer next to the textbox. Is there a way to have the calendar over the flash animation?
Thank you

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

Chali
on 04/08 at 09:57 AM

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

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

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

Thank you anyways

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

Chali
on 04/08 at 10:24 AM

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

<p>Hi all. Why you call it Range calendar, when the main functionality of application doesn’t work ? At range calendar i can select bigger FROM date then is actual TO date and vice versa.&nbsp; xD Will you repair this BIG BUG ?

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

MrHappy
on 04/09 at 03:25 AM

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

<p>Hi all.

Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).
I try i.e. as:
alert ($("#range1").daterangepicker()datepickerOptions:{datepicker("getDate")});
but nothing.
Do you can help me?
Big thx.

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

<p>Is there anyway in the range picker to highlight the startdate to the enddate? and also to fly the menu out to the left instead of the right?

Thanks awesome plugin.

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

Vince
on 04/23 at 09:26 AM

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

<p>@Vince: We’re putting together an update with some improvements which will include better collision detection (opening to the left) and restricting first/end date restriction among other things. Highlighting will probably need to happen at the jQuery UI plugin level, whereas this plugin is just a wrapper that extends the UI datepicker’s features, so you might want to discuss that idea on the UI planning wiki.

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.

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

chris
on 04/23 at 11:44 AM

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

<p>To those having problems on IE 7/8 with the “‘this.text’ is null or not an object” error message, make sure you are properly initializing your options in the presetRanges array, ie:

- Closing and opening brackets
- Proper commas to separate items

I had the same problem because my enumeration had a superfluous comma at the end of my options.

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

Shaun
on 04/23 at 04:21 PM

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

<p>“superfluous comma at the end of my options”

Thank You! That was exactly it! Just that one comma. You are awesome. Thank you for taking the time to post what might have seemed to be an obvious thing, it wasn’t to me, and the issue is now resolved. Please have an awesome weekend!

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

Stephen
on 04/23 at 04:35 PM

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

<p>I had this issue once before and took me hours to debug. IE Sucks!

Will never forget that though.

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

Vince
on 04/24 at 05:39 AM

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

<p>Hi, I would like the date range picker to popup on the left of the field. Is there any way to to this?

Several people asked already but no answer or help has been given to achieve this…

<p>When I enter in a Range of ‘{text: ‘Yesterday’, dateStart: ‘Yesterday’, dateEnd: ‘Yesterday’ }’ I get an unexpected result.&nbsp; I get the date range with splitter of yesterday’s date to today’s date.&nbsp; This seem odd considering the Range of ‘{text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ }’ produces the expected specific date of today.

this function. I am using visual studio 2008
Any solution
Thanks
Kunal

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

kunal
on 05/05 at 07:19 AM

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

<p>@kunal: try scoping your selector to the particular input in inputs you want to convert, rather than every input on the page. It might be trying to convert inputs that aren’t @type=text.

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

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

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

<p>I got the sample code to do exactly what I want, but when I point it at a specific control ID I get

“Microsoft JScript runtime error: ‘val()’ is null or not an object”

What is the syntax for this? I assume if I’m only using one picker on a page I don’t need to wrap them in an iFrame, right?

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

Josh
on 05/05 at 04:51 PM

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

<p>oops, stupid oversight, never mind that last comment from me.

One thing I didn’t see a good solution for yet though is: is there a way to just scale down the calendar’s font size without mucking up the rest of my page? I’m trying to put this in an existing app with it’s own CSS.

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

Josh
on 05/05 at 06:00 PM

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

<p>Seems my first comment was rejected.

Once more in shortform:

Thanks for the plugin! Really nice one.

For my purposes sadly just a little to much (I dont need no DateRange and DateJS - only the ‘today’, ‘tommory’, ‘specific date’ options and the next, previous day arrows)

I just wanted to mention one little “bug”: when selecting ‘today’, its handled as a range from today till today. Because of that you get for a second “11.05.2010 - 11.05.2010” in the input field. This also happens when you now use the arrows.
Its not really a bug but it just doesnt look nice and I think it will be irritating for the users.

Sorry for my english.
Thanks for all the great things youre doing!

Greetings

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

Sithlord
on 05/11 at 08:34 AM

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

<p>For all of you seeing the this.text error in IE7 or 8, I realized that when I edited the custom text in lines 26-36 of the JS file, I must have screwed something up and had a typo somewhere. I reverted it back to the original and now I don’t get any errors!

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.

<p>This works perfectly on Date Fields on my current page. However when I add a new Date field to the page via javascript datepicker does not work for that new Date field. I have set the class name to datePick using setAttribute in Javascript. Can someone explain how to make the datepicker work with Date Fields added to the page dynamically via Javascript.

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

Wayne
on 05/25 at 12:16 PM

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

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

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

mumu
on 06/03 at 12:40 PM

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

<p>daterangepicker do not respect custom dateFormat, when you change order of month/day/year.

If you set dateFormat: 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:

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

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

roy
on 06/12 at 05:50 AM

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

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

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

Muhammad Shoaib
on 06/13 at 05:16 AM

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

<p>@Veronika wrote&gt; I’ve tired “onchange” but it doesn’t work ... any ideas?

<p>Is there any way to have the “Specific Date” be based off the current range-end instead of the current range-start? For example, we have a default date range of the past 12-months, but when a user wants a specific day, they are usually looking for a specific day near “today”, not a specific day a year ago.

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

Nicholas Calugar
on 06/15 at 07:01 PM

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

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

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

prodigel
on 06/23 at 03:32 AM

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

<p>Thanks for the plugin (very slick)! This would be absolutely perfect if it also supported time ranges. In my application users must select a date range which starts and ends on specific times.

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

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

scott
on 07/23 at 10:32 AM

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

<p>The latest version of daterange picker doesn’t work with jquery1.4.2 and jquery-ui 1.8.2. I noticed that this version uses lower jquery and ui versions, wondering if you could update it with the latest jquery? Thanks.

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

Jean
on 07/23 at 03:37 PM

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

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

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

Nicholas Calugar
on 07/23 at 03:48 PM

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

<p>I am using IE7 and struts framework with jquery1.4.2 and ui-1.8.2. Below is a simple jsp file which generates error of “A runtime error has occurred ... Line:29 Error: ‘length’ is null or not an object “

<p>Where is jQuery and the daterangepicker javascript included? The output in the browser would be much more useful...struts code is on the backend and has nothing to do with JS functionality. Do you have this on a page we could look at?

<p>It must be cutting out your script tags...could you post the browser source to <a href="http://pastebin.com/" rel="nofollow">http://pastebin.com/</a> and then put the URL to the pastebin in a comment here?

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

Nicholas Calugar
on 07/27 at 10:37 AM

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

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

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

<p>any one can tell me how to enable drop list for year and month as shown in demo??

any help would be appreciated

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

Rashid
on 08/03 at 06:20 AM

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

<p>it would be great to have it on github!

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

tom
on 08/04 at 03:00 PM

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

<p>The rangepicker won’t work properly on a modal box, it appears in a different position rather than relatively showing under the textbox being clicked for the date input. Also it shows under the modal box and not over it. It has something to do with the z-index.

I tried a temporary fix by changing the z-index into 9999 but again, the problem is the position where it shows up.

I’m not a JQuery expert. Can anyone suggest some solution for this?

I read a same previously by Wade0 but the solution suggested is just to change the PosX and PosY, unfortunately, I don’t know how to set this dynamically relative to the inputbox being clicked.

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

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.

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.

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.

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

Murphy
on 08/10 at 07:22 PM

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

<p>Hey - great work - to those who are having issues setting a Minimum or Maximum date (earliestDate, latestDate) - you are probably setting it how I initially thought i was supposed to - however we must remember that this is based off of the jQuery UI Date range picker, in order to limit the calendar, we must also pass options to that plugin - please see below for sample instantiation code:

<p>I have the same question as Mastyf. Is it possible to change the first day of week for the range calendars from the webpage using it? I saw Tiffanys answer above but since I sure suck as javascript/jQuery I couldn’t figure out where to put that line of code.

It would be nice if you just could change the language code from en-US to whatever you wanted and have it change the look of the calendar, but just defining the first day of the week would also help.

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

LennyPain
on 08/14 at 05:51 PM

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

<p>@LennyPain:

Hi lenny,
changing the first day of week is very simple,set a value to firstDay option in datepickeroptions like this:

<p>I really like your Date range picker. but I tried the earliest date and latest date is not working. i have situation. they should not pick earlier date and also they can select after current date. ( Ex : 06/01/2010 should be earliest date) they can’t able to pick earlier than that date.

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?

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

Kumar Saurav
on 09/07 at 04:22 AM

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

<p>FG doesn’t seem very interested in fixing this but I feel that I’ve come up with a more proper fix for the onClose bug.

First off the concept of HIDING the rangepicker (RP) is not and should not be the same as the concept of CLOSING the RP.

Close should indicate that all work within the RP is completed and all values have been finalized.

Hide should do nothing other than change the RP’s visibility.

Based on those definitions, a proper close event will occur when either the ‘Done’ button has been clicked or after the ‘.range-end’ datepicker (DP) has been set with the ‘closeOnSelect’ option set to true.

Simply clicking away from the RP to hide it while it is shown should not guarantee that any values that have been changed should be committed. Without clicking ‘Done’ and without ‘closeOnSelect’ set to true, clicking away from the RP should do nothing more than hide the RP.

Lastly, in its current configuration, the DP onSelect handler triggers the RP’s onChange handler AFTER it triggers onClose. This doesn’t make much sense to me at all. No further events should occur after the close event.

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

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

Roberto Ortelli
on 09/13 at 02:30 AM

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

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

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

Marsil
on 09/14 at 01:59 PM

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

<p>First of all this is a very very nice plugin for jquery.

I have one specific situation with my webpage and Im posting a solution which Im sure someone will find handy. It is a form with various buttons for various tasks and everything was done in the background via $.ajax and POST.

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

<p>Looks great in IE8, but IE9 beta doesn’t seem to render the corners...I’m using the same .ui-corner-X classes on some of my clients sites and they are rendering in IE9, for what its worth. I’m sure they’ll make change to IE9 before its released. BTW, Chrome makes the fg site come alive in most examples. Thanks for this one! (I didn’t read all the comments so if this is redundant you can consider it confirmation)

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

<p>I’m currently working on a site for a client of mine, and I’m trying to implement a date range picker like that on Google Adwords where the picker updates a control listing the range name and the dates picked (eg, Last 7 days: 01/10/2010 to 07/10/2010).&nbsp; Is there a way to hang this date range picker off a div instead of an input field?

<p>Hmm… OK, the tab order on this form is not what I was expecting it to be…

The comment above was supposed to be as follows:

I’m currently working on a site for a client of mine, and I’m trying to implement a date range picker like that on Google Adwords where the picker updates a control listing the range name and the dates picked (eg, Last 7 days: 1st October, 2010 to 7th October, 2010). Is there a way to hang this date range picker off of a div for example instead of an input field but still have the plugin automatically update a hidden input field and use onChange to update the content of the div with the formatted dates?

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

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

Canadaboy
on 10/26 at 02:52 AM

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

<p>ok - found the solution above with some testing (which is great because js is NOT my forte - to fix and allow date picker to show up on jquery ui tabs (second and other tabs) - modify the daterangepicker.jQuery.js file as follows:

<p>In the calender, there are year dropdownlist shown but i found out the latest year shown goes until 2025.

What should I do if i want to change the year shown in the year dropdownlist?
For example, the range is between 1900 to 2010 only.

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

DEN
on 11/03 at 04:11 AM

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

<p>I have updated your plugin for an application I am developing, where the user must be limited to a certain number of days from the start or end date they select.&nbsp; The parameter is “daysInRange”.&nbsp; We must limit the user’s choice to a 90-day period, for instance, upon a user selecting Jan 1, 2010, the last day that is enabled in the picker for “end date” is April 1, 2010.&nbsp; When they adjust either date, it updates the specified date range period.

Let me know if you think you would like to add this feature to your plugin, and I’ll pass the code along to you.

<p>No problems implementing this plugin, but my boss says our users won’t know what to do if there isn’t a calendar image to click on. Anyone know how I can place an image next to the form field and open the datepicker when the image is clicked on?

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

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

Pete
on 12/07 at 06:05 AM

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

<p>I apologize if this is a dumb question, but I cannot seem to figure this out. Is there a function call to get the current date string from the daterangepicker object?

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

John
on 12/09 at 09:11 PM

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

<p>I found a problem when using JQuery UI 1.8.7.

there is a problem there that the calender dont show because in the jquery ui css file, the datepicker class called “.ui-datepicker” have a property of “display:none”

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 !

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.

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

Richard Korebrits
on 01/21 at 04:39 AM

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

<p>Has anyone attempted to incorporate the time add-on from the Trent Richardson, <a href="http://trentrichardson.com/2010/04/19/timepicker-addon-for-jquery-ui-datepicker/" rel="nofollow">http://trentrichardson.com/2010/04/19/timepicker-addon-for-jquery-ui-datepicker/</a>, with this daterange picker?

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

John
on 01/25 at 02:15 PM

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

<p>I recently updated my custom theme css from jquery-ui-1.8.7.custom.css to jquery-ui-1.8.8.custom.css. Now I the date picker calendars don’t appear. For example if I click on the “Specific Date” option I see the area where the calendar is supposed to be but it only says “Specific Date” and then shows the “Done” button. I can’t think of a reason why the css file would be the problem but that’s the only file that has changed in the last 2 weeks. Any thoughts? Thanks.

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

Todd
on 01/26 at 01:29 PM

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

<p>Same problem as Todd. It works in Firefox but ot in IE, Chrome or Safari. Using jquery-ui-1.8.9

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

Rodrigo
on 02/03 at 03:45 AM

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

<p>How to make the date picker align to the bottom right of your element instead of bottom left, assuming your date picker was initialized with an element called “input#date”:

The reason is that in jQuery UI 1.8.9 (or 1.8.8 ?), datepicker has a new behavior. In CSS, “ui-datepicker” is now marked as “display:none”. jQuery-UI builds the whole datepicker, then call show() to display it. This normally overrides the css display by a new style="display:block" attribute.

But Date Range Picker tries to build a datepicker on an element before appending it to the document. As the element is not attached to the document, the browser may not know which sylesheet has to be applied on it. IE and Chrome do not see correctly the “display:none” line from CSS, so jQuery thinks that the element is visible, and show() function will not add the style="display:block" attribute.
This happens because jQuery show() function calls window.getComputedStyle, which does not work the same on all browsers.

A simple fix on Date Range Picker is to append the datepicker’s element to the document before calling datepicker(). That is what I did, and it seems to work good now.

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

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

carlos
on 02/09 at 02:59 AM

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

<p>Sorry to ask, but how do I read each date separately?

Do I have to date the full range from input box and parse from it?

or is there any function to do so. What I need is

$(’selector’).GetDateFrom();
$(’selector’).GetDateTo();

or something smiler.

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

Shurid
on 02/15 at 10:19 AM

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

<p>Very good contribution for web developer !!

But In IE-8, I faced may problem in event handler functions. onClose, onChange is not worked :(

So please help me for this.

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

Haresh Vidja
on 02/16 at 12:12 AM

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

<p>There is a bug. Even in demo on this site.

If you click “Specific Date”, and will not to choose the date, then click “All dates before” and click “Specific Date” again, current year is changed to 1996.

Waiting for the fix :)

Tested: Google Chrome 9.0.597.98, FireFox 3.6.13

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

Alex
on 02/21 at 12:40 PM

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

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

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

Reshab
on 02/25 at 11:25 PM

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

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

<p>onChange function call triggers one or two time. Normally i need onchange function to trigger one time. This is serious error please get through it. Say me a temrory solution to solve this onChange function call problem

<p>I am trying to submit date values via ajax during onChange function. Since onChange function trigger twice. ajax call run two times and during result i fetcgh old value. If any one uses date range picker along ajax. Help me. I need to trigger ajax with from and to date as input. since onChange function trigger more than once it errors me.

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

<p>Hey, DCS Solution, this is promotion for a product that’s not even available yet! Is this a joke?

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

Luigi
on 04/14 at 09:13 AM

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

<p>Hi, Luigi. The product is available. If anyone is interested, please contact us on our site for now. We are just sorting some things before putting it up on our site for sell. It might take 1-2 days before we put it up on our site. There’s nothing wrong in promoting your product before actually releasing it. Everyone is doing it.

<p>Kate and Viðar are correct.&nbsp; datepickerOptions doesn’t work when using a button to bring up the datepicker (showOn, buttonImage, &amp; buttonImageOnly).&nbsp; The values are getting passed in correctly to the daterangepicker, but it’s not getting passed to the jQuery datePicker so that the button can get appended to the textbox.&nbsp;

<p>I love this plugin, its perfect for what I need but I’m having the same problem as mentioned in a few other posts here, regarding tabs.

If date range picker is loaded into a tab-less browser it works fine. If however its loaded into a tabbed interface and the date range picker input field is initially hidden, then the calendar is no longer anchored to the input but opens at the very bottom of the screen.

If I refresh the tabbed window, date range picker once again works fine. Any help on this? I have tried one of the suggestions above but to no effect.

Cheers on a great plugin!

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

Livestate
on 05/03 at 04:12 AM

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

<p>Really nice plugin, thanks, but a couple of issues I found:

For anyone requiring English(UK) dateFormat (i.e. dd/mm/yy), you will find issues after specifiying this unless you also alter the culture info defined for the Date.js code. I found before altering this that when opening the calendar after previously selecting a date, the date would be assumed to be in US format, hence the calendar would open on the incorrect month.

I’ve yet to resolve this issue…
I’m using 2 inputs for start and end dates. If you already have dates entered in your two inputs, whether selected using the RP or typed in, unless you previously selected the date from either calendar, upon opening one/both calendars the currently selected/entered date is not highlighted (with ui-state-active)?

Other issue I think is inherent with the jQuery datePicker, but still annoys me…
When your currently selected date is highlighted, when moving to another month, the same day/date of the month will be highlighted for every month. Doesn’t really cause any issues, but just seems wrong to me.

If anyone has any ideas on either of the above, I’d appreciate any suggestions.

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

Tom R
on 05/11 at 06:30 AM

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

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

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

Adam Fekete
on 05/17 at 09:39 AM

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

<p>I have solved the above problem, for all those who want to have the daterangepicker display when the text box is called all you need is this:

<p>It’s looking very nice. but here i have a doubt, if i want to use same thing multiple times in a single page , how can i use it?

Thanks

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

ramu
on 06/10 at 01:28 AM

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

<p>I wrapped the input field in a div and floated the div to the right side of my page. The datepicker now appears below the last menu item of “Date Range”. How can I get this to open to the left of the drop down menu?

Thanks

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

Ang
on 06/15 at 03:01 AM

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

<p>The latest version of daterange picker doesn’t work with jquery1.6.1 and jquery-ui 1.8.12. Tested on IE, on FF and Chrome it’s fine.

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 ?