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

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

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

Luka Kladaric on 01/05  at  06:54 PM

<p>@Luka: Good Catch, thanks! Fixed.

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

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

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

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

Ignacio Vivona on 01/05  at  07:35 PM

<p>no prob, glad to help… confirming the problem appears to be fixed now

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

great stuff, keep up the good work!

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

Luka Kladaric on 01/05  at  09:41 PM

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

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

Adam Fortuna on 01/06  at  08:00 AM

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

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

Dude on 01/06  at  10:07 AM

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

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

Atilla on 01/06  at  10:10 AM

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

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

Dude on 01/06  at  10:10 AM

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

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

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

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

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

Volomike on 01/06  at  10:23 AM

<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

<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

<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

<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

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

Nice work guys!

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

Wynn Netherland on 01/06  at  03:48 PM

<p>Suggestions:

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

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

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

Volomike on 01/06  at  03:55 PM

<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

<p>@Volomike:

- 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

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

You can see the idea http://www.dhtmlgoodies.com/scripts/js_calendar/js_calendar.html

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

seshu on 01/07  at  02:43 AM

<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

<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

<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

<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

<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

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

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

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

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

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

<p>Hey Maggie thanks this work very good

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

David Rodriguez on 01/09  at  11:24 PM

<p>In Opera this webpage looks like this: <a href="http://www.abload.de/image.php?img=screenshot_001_090113h9me.png" rel="nofollow">http://www.abload.de/image.php?img=screenshot_001_090113h9me.png</a> !

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

carlos on 01/13  at  04:07 AM

<p>I found there are an issue to callback “onClose” . see the code daterangepicker.jQuery.js at line 301

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

I think it should be modifed like this:

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

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

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

bear on 01/14  at  11:42 AM

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

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

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

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

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

firefly on 01/15  at  12:12 PM

<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

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

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

</form>

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

Justin on 01/15  at  04:17 PM

<p>@Justin: You should probably check your selector to make sure it’s scoped to just the first input in that code sample.

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

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

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

<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

<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

<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

<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

<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

<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

<p>Hi,

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

justin on 01/20  at  04:32 PM

<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

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

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

justin on 01/20  at  04:49 PM

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

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

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

<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

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

Gafitescu Daniel on 01/21  at  03:51 AM

<p>Hi !

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

So i tried something like that :

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

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

but of course it doesn’t work ^_^

If someone may have an idea, will be cool !

And good work again !

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

Peepingtom on 01/21  at  11:48 AM

<p>Question:

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

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

NTulip on 01/21  at  04:43 PM

<p>forgot the link to the example: <a href="http://www.filamentgroup.com/examples/daterangepicker_v2/" rel="nofollow">http://www.filamentgroup.com/examples/daterangepicker_v2/</a>

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

NTulip on 01/21  at  04:44 PM

<p>Very Nice control.

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

Regards

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

quim on 01/24  at  03:48 PM

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

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

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

Goran Juric on 01/25  at  08:48 PM

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

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

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

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

baael on 01/28  at  02:17 AM

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

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

quim on 02/01  at  02:09 PM

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

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

Chris Barr on 02/04  at  06:46 PM

<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

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

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

chris catton on 02/05  at  09:12 AM

<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

<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

<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

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

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

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

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

$(’input’).daterangepicker({
presets: {
specificDate: ‘Just one date...’,
allDatesBefore: ‘Any date before...’,
allDatesAfter: ‘Any date after...’,
dateRange: ‘Custom range...’
}
});

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

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

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

<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

<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

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

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

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

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

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

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

<p>to my first post i wanted to add some more information:

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

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

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

frank on 02/05  at  11:48 AM

<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

<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

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

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

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

<p>Hi scott

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

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

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

chris catton on 02/06  at  11:54 AM

<p>Hey Chris,

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

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

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

<p>Hello Scott,

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

is not getting me the preselected dates highlighted.

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

onClose: function(){
randomfunction.set(myself.sDateStart,myself.sDateEnd);
}

is this intended or am i doing again something wrong?

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

thx for any advise

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

frank on 02/09  at  04:51 AM

<p>How i can change the appendTo property??

The example is

appendTo: ‘body’,

but i need put them in the input.

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

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

dipone on 02/09  at  11:57 AM

<p>Hi All,

Thnaks

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

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

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

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

The ones i’m using are:

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

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

It’s perfect in FF, just no IE6.

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

Rob on 02/10  at  10:29 AM

<p>re:the abbove

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

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

Rob on 02/10  at  10:31 AM

<p>Hi This hack dont work anymore with the new version, i need use the new version because i have to chage the present value

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

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

Thanks

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

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

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

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

David Rodriguez on 02/12  at  03:41 PM

<p>Hi scott,

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

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

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

<p>Hi scott

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

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

<%= f.submit “Create” %>

<% end %>

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

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

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

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

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

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

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

chris catton on 02/16  at  03:43 PM

<p>sorry - for datepicker in the above post, read daterangepicker

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

chris catton on 02/16  at  03:44 PM

<p>Thanks Scott

Translation is complete now.

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

Quim on 02/17  at  09:05 AM

<p>Hi all,

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

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

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

Ideally I’d like it this size:

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

Thanks in advance for any help!

Bob

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

Bob on 02/17  at  09:56 AM

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

In the future, please post UI-related questions in google groups http://groups.google.com/group/jquery-ui. You’ll get help much quicker there.

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

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

<p>Scott,

That did it!  Thanks for your help

Regards

Bob

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

Bob on 02/18  at  09:56 AM

<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

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

very nice little datepicker, my compliments.

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

regina on 02/20  at  03:45 PM

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

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

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

<p>hello

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

asaf on 02/23  at  01:11 PM

<p>Hello…

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

Souhail Jabbour on 02/25  at  01:22 AM

<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

<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

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

Cheers

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

redsquare on 03/09  at  09:11 AM

<p>test link for above issue <a href="http://jsbin.com/ajusu" rel="nofollow">http://jsbin.com/ajusu</a>

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

redsquare on 03/09  at  09:18 AM

<p>Great control

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

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

Kevin on 03/11  at  01:59 PM

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

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

Mckensy on 03/13  at  05:55 AM

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

console.log(days);
$(’input’).daterangepicker({
earliestDate: Date.parse(days.first),
latestDate: Date.parse(days.last),
posX: 441,
posY: 346
});

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

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

riegersn on 03/14  at  11:37 PM

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

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

riegersn on 03/14  at  11:58 PM

<p>What License is this date-picker?

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

barry on 03/16  at  02:15 PM

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

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

Works like a champ! Thanks!

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

nklineg on 03/19  at  01:34 PM

<p>How do you create a datepicker with a select box for day, month and year?

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

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

ad on 03/19  at  02:44 PM

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

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

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

@ Azadi Saryev: Thanks. Updated.

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

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

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

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

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

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

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

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

<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

<p>Thanks Mike. Fixed now.

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

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

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

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

Mike McNally on 03/25  at  11:01 AM

<p>Workaround about “dateStart is not a funtion”.

by:

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

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

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

<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

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

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

Greatly appreciated.

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

Javier on 03/26  at  05:28 PM

<p>comments on?

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

admin on 03/27  at  09:28 AM

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

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

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

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

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

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

<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

<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

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

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

<p>Hi

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

Veronica on 03/31  at  08:10 PM

<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

<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

<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

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

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

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

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

Jeremy on 04/05  at  01:49 PM

<p>I forgot you also have to pass “doneBtn”.

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

Jeremy on 04/05  at  02:00 PM

<p>Updates:

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

<p>Bug or have I done something wrong?

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

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

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

Peter Bengtsson on 04/09  at  09:28 AM

<p>About my last error, it can be seen in action here:

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

Peter Bengtsson on 04/09  at  09:33 AM

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

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

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

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

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

Peter Bengtsson on 04/09  at  09:59 AM

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

Thanks for the great plug in.

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

Kris Gosser on 04/09  at  01:32 PM

<p>@Kris: Good question. Since this plugin implements date.js, it’s quite simple.

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

You can test expressions for other date.js string conversions on their site: http://www.datejs.com/

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

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

<p>Thanks Scott,

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

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

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

Kris Gosser on 04/09  at  01:59 PM

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

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

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

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

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

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

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

<p>Thanks Scott, got it all to work now.

Noted on the passing of functions too.

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

Kris Gosser on 04/09  at  02:33 PM

<p>Hi everyone,

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

I am using the following plugins:

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

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

To visit the widget that I am developing, please use this link:
http://joaogala.com.sapo.pt/v2/index.html

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

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

<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

<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

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

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

I updated http://joaogala.com.sapo.pt/v2/index.html to see the last version

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

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

<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

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

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

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

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

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

<p>Is the onClose event firing 3 times for anyone else?

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

Justin on 04/17  at  10:49 PM

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

Any help would be greatly appreciated.

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

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

Justin on 04/17  at  10:58 PM

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

Any thoughts? Awesome plugin!!!

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

Aditya Sanghi on 04/18  at  05:43 AM

<p>Thanks--Great plugin!

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

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

Philip Pond on 04/20  at  07:18 PM

<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

<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

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

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

Pablitt on 04/22  at  03:54 PM

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

I tried:
$(function(){
$(’#rangeA’).daterangepicker({
posX:800,
posY:525,
onClose: showHint("04/05/2009",2)
});

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

What am I missing?

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

Tiffany on 04/24  at  12:40 PM

<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

<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

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

I guess I’ll have to implement a counter.

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

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

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

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

Seems to work :-P

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

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

<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

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

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

Tiffany on 04/27  at  11:11 AM

<p>Mastyf,

I set the first day to Monday using

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

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

Tiffany on 04/27  at  11:51 AM

<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

<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

<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

<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

<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

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

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

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

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

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

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

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

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

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

<p>Better :-) But onClose doesn’t fire when navigating with the arrows, though.

Thanks for a great plugin btw.

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

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

<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

<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

<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

<p>Feature to add :

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

shamun toha on 05/10  at  07:09 AM

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

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

Eric on 05/11  at  09:08 AM

<p>@Matt: Thanks for pointing that out. It’s fixed now. Anyone populating the datepickers with preset input values should grab the updated script.

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

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

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

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

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

Its a good idea to implement dispose method.

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

hazarin on 05/14  at  03:45 AM

<p>I temporaly fix this with this code:

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

Waiting for ui release.

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

hazarin on 05/14  at  04:10 AM

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

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

Steve on 05/14  at  03:28 PM

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

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

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

“Internet Explorer cannot open the Internet site http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
Operation Aborted.

Any ideas?

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

Mike on 05/14  at  10:50 PM

<p>Trying to set up quarterly preset ranges and trying to do it dynamically.

thanks

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

KAB on 05/15  at  07:15 AM

<p>never mind - got the year via javascript

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

KAB on 05/15  at  07:58 AM

<p>Quarters would also make a great new feature.

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

Steve on 05/15  at  11:40 AM

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

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

It eventually crashed IE8 completely.

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

Scott on 05/15  at  02:26 PM

<p>Sorry everyone. There was a trailing comment in the source that was throwing IE off.

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

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

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

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

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

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

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

Scott Whigham on 05/15  at  03:13 PM

<p>@Scott: No problem. Glad you like it!

Thanks again.

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

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

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

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

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

Mike on 05/15  at  04:09 PM

<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

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

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

Scott Whigham on 05/15  at  04:26 PM

<p>IE problem fixed.&nbsp; Thanks.&nbsp; Great plugin BTW

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

Mike on 05/15  at  09:51 PM

<p>Fantastic plugin! looks and works great.&nbsp;

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

Thanks in advance!

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

Shadi Almosri on 05/18  at  05:19 PM

<p>Few bugs I found after playing with this:

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

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

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

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

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

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

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

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

David Herring on 05/20  at  09:02 PM

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

BTW - This is brilliant work.

thx dave

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

David Herring on 05/20  at  09:07 PM

<p>Example with multiple date selects using Jquery.

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

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

David Herring on 05/20  at  09:30 PM

<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

<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

<p>Hi Scott,

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

Thank you,

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

Kemal on 05/25  at  02:48 AM

<p><a href="http://www.eyecon.ro/datepicker/" rel="nofollow">http://www.eyecon.ro/datepicker/</a>

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

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

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

dave

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

David Herring on 05/25  at  05:19 AM

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

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

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

Anyone have solution to this?

Thank you.

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

Yehuda on 05/25  at  09:20 AM

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

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

.ui-daterangepickercontain {
position: absolute;
width:600px;
z-index: 999;
}

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

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

Yehuda on 05/25  at  10:00 AM

<p>In Google Chrome, I get the error:

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

I looked at the source code for your demo on
http://www.filamentgroup.com/examples/daterangepicker_v2/

and you are using jquery.1.3.1

Any ideas how to make this work for 1.3.2?
Thanks

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

Yehuda on 05/26  at  04:30 AM

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

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

alex on 05/27  at  06:54 PM

<p>I tried the following but i’m getting an error:

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

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

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

alex on 05/27  at  07:47 PM

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

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

});
});

Results:

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

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

Tony on 05/28  at  01:15 AM

<p>I have the same issue as Yehuda:

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

Note: This works fine in Firefox 3

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

jordan on 05/29  at  12:06 AM

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

Thanks for the great plugin :)

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

jordan on 05/29  at  12:11 AM

<p>never mind, i now got these options working

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

alex on 05/29  at  11:37 AM

<p>Hi!! I just trying to build new website.

Nobutaka from Japan

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

nobutaka on 05/31  at  10:00 AM

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

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

Rodrigo on 06/02  at  07:04 AM

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

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

Rodrigo on 06/02  at  02:19 PM

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

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

alex on 06/02  at  04:08 PM

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

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

timmfin on 06/05  at  02:26 PM

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

Any ideas/thoughts?  Thanks,

++++++++++++++++++++++
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8” />
<title>Untitled Document</title>

<!-- -->

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

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

}); // END :: ready function

</head>

<body>

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

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

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

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

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

Eddie Flowers on 06/09  at  06:05 AM

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

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

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

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

<!-- -->

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

Eddie Flowers on 06/09  at  06:07 AM

<p>Greetings,

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

Henry Contreras on 06/10  at  12:16 PM

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

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

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

Thanks

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

no on 06/11  at  02:36 PM

<p>Surely there should be a built-in way of making sure that the user never selects a second date that is earlier than the first date?

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

Patrick on 06/16  at  06:58 AM

<p>Hey Guys,

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

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

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

Stefan on 06/16  at  08:53 AM

<p>I have a feature request.

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

Lucas on 06/20  at  05:50 PM

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

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

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

Milton on 06/23  at  04:09 AM

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

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

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

<p>Anything with only a popup calendar?

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

Auto Baneasa on 06/23  at  02:11 PM

<p>Pretty nice post. I just stumbled upon your site and wanted to say

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

Jenny on 06/23  at  09:13 PM

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

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

eran on 06/24  at  09:30 AM

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

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

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

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

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

Scott Brown on 06/24  at  03:22 PM

<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

<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

<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

<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

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

rangeInput.val() is undefined
Line 112

Any ideas?

Thanks!

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

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

<p>OnClose() bug:

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

http://thehumblecoder.wordpress.com/

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

Michael Ritsema on 07/01  at  03:13 PM

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

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

Nigel on 07/09  at  11:25 AM

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

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

Paul Russo on 07/13  at  02:27 PM

<p>Hi,

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

Chris on 07/15  at  09:15 AM

<p>Hello,

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

thanks!

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

JamesR on 07/15  at  10:23 PM

<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

<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

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

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

Chris on 07/21  at  01:34 PM

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

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

Kevin on 07/21  at  02:59 PM

<p>Wow the comments just keep piling up for this awesome plugin.

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

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

Is that at all possible?

Thanks

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

NR on 07/21  at  04:11 PM

<p>@Kevin: something like this:

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

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

Chris on 07/22  at  07:28 AM

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

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

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

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

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

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

NR on 07/22  at  08:39 AM

<p>I made two changes to daterangepicker:

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

Travis on 07/22  at  02:35 PM

<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

<p>Hi guys,

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

pans on 07/30  at  08:22 AM

<p>Hello,

Great work on the plugin!  I REALLY want to use this for an upcoming project, however I’m noticing some issues when I use this within jQuery UI tabs.  I’m also using blueprint css, so maybe that has something to do with it?  What I see is that the date selector doesn’t appear right under the input field.  Instead, it appears at the very bottom and to the far left of the page.  Any ideas what this could be?

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

Jason Palmer on 07/30  at  04:35 PM

<p>Great work :)

I had a problem with the appendTo property : the picker was displayed at the bottom left of the page (the appendTo was linked to a basic text input).

I Changed this in the source code of the picker:

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

replaced by

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

Hope it could help someone :)

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

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

<p>Hi Guys,

I actually have solved the problem I was having.  For some reason, the appendTo property was not working for me.  I really just wanted the drop-down to show right underneath the text field itself instead of the body or the element you select for the appentTo property.

I went ahead and changed the following line from:
jQuery(options.appendTo).append(rp);

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

And that works great for me now!

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

Jason Palmer on 07/31  at  03:24 PM

<p>Hello,

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

shaun on 07/31  at  04:16 PM

<p>@shaun :

try

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

instead of

$(’input_date’).daterangepicker( );

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

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

<p>Got a problem with the dateFormat.

I have it set the the uk date format (dd/mm/yy) and this outputs the date correctly, but I have two inputs with initial values populated with the same format.
$("input#fromDate, input#toDate").daterangepicker({dateFormat: ‘dd/mm/yy’});

When I click on the input and change the date, the calenders are reading the format wrong, where dd = mm and mm = dd.

How can I go about fixing this?

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

Liam on 08/04  at  04:39 AM

<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

<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

<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

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

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

TO

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

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

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

Travis on 08/14  at  08:28 AM

<p>Disregard that.. blur() hides the rangepicker before you can click more than 1 date. &gt;.&lt;

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

Travis on 08/14  at  08:32 AM

<p>True fix to get the daterangepicker to trigger when you tab from a previous input. I’m serious, it works this time.

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];

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

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

Bam, said the lady.

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

Travis on 08/14  at  09:59 AM

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

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];
var nex = inp[index+1];

var shifttab = false;

jQuery(nex).keyup(function(e){
shifttab = false;
})

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

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

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

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

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

Travis on 08/14  at  01:33 PM

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

var inp = jQuery(’input’);
var index = inp.index(this);
var curr = inp[index];
var prev = inp[index-1];
var nex = inp[index+1];

var shifttab = false;
var tabit = true;

jQuery(document).keyup(function (e) {
if (e.which==16) {
tabit=true;
shifttab = false;
}
});

jQuery(document).keydown(function(e) {
if (e.which == 16) {
tabit = false;
shifttab = true;
}else {
if (e.which!=9) {
shifttab = false;
}
}
});

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

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

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

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

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

Travis on 08/14  at  02:04 PM

<p>Hi, wonderful plugin, I’ve noticed a strange behaviour.

I’m using the date range plugin for filtering elements within a range of dates, when I select a range I do an ajax call sending the selected value.

I do this using the onClose event, but sometimes the ajaxcall is called before da date input value is changed and It sends the old range.

Any help?
Thank you

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

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

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

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

jd on 08/19  at  01:11 PM

<p>hi, is there a way to have the range picker open automatically on load, and stay open with only the “select range” and shortcut options available ( two calendars )?

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

chris on 08/20  at  07:47 PM

<p>I am posting css style fixes I had to introduce to get this control properly rendered in quirks mode (i.e. Sharepoint environment). I hope this could save somebody’s time.

<style type="text/css">
input.rangepicker-fix
{
height:17px !important;
font-size:8pt !important;
padding-bottom:0 !important;
padding-top:0 !important;
}

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

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

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

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

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

Vladimir Smirnov on 08/24  at  07:09 AM

<p>Humm… interesting,

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

Anyway, thanks for the post

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

software developer on 08/27  at  01:22 PM

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

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

When the button is clicked I do:

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

Any suggestions would be greatly appreciated.

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

Brian on 08/27  at  01:51 PM

<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

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

So to answer my question look for this:
// send back to input or inputs
if(rangeInput.length == 2){
rangeInput.eq(0).val(rangeA);
rangeInput.eq(1).val(rangeB);
}
else{
rangeInput.val((rangeA != rangeB) ? rangeA+’ ‘+ options.rangeSplitter +’ ‘+rangeB : rangeA);
}

And modify it to your need, in my case I just commented out the first part of the statement and left it as:

rangeInput.val((rangeA != rangeB) ? rangeA+’ ‘+ options.rangeSplitter +’ ‘+rangeB : rangeA);

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

Jason on 08/27  at  06:06 PM

<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

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

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

Mike on 08/31  at  01:56 AM

<p>doesnt work in opera.. :(

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

Stefan on 09/01  at  04:44 AM

<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

<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

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

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

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

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

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

<p>@Stefan  Can you be a little more specific on which version of Opera you’re having troubles with? I just tested this on Opera 9 and 10 on Mac and it works well in both.

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

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

<p>Is it possible to the make the select calendars fly out to the left?&nbsp; Or....even better...do so based on the viewport?

Thanks for any tips!

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

Ben on 09/03  at  07:49 PM

<p>This would be great as a Wordpress plugin for the admin area - I don’t have the requisite skills, but has anyone already done this?

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

Luke Scammell on 09/05  at  06:06 AM

<p>Hi

I add a few PresetRanges, like ‘Last Tree Months’, ‘Last 30 days’,… and it’s working just fine.
However, I believe that we should be able to select a specif month or year, like we do it with specific date Preset. Let’s say we select August 2009, Date Range Picker input box should show 01/08/2009 - 30/08/2009. The same to a specific year, if we select year 2008, input box should show 01/01/2008 - 31/12/2009.
It will be nice if we could have these Presets, or if some one could tell me how to do it.

Regards and keep the good work

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

quim on 09/06  at  05:34 PM

<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

<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

<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

<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

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

$(field).closest(’.dialog’).bind(’dialogclose’, function(event,ui){
$(’.ui-daterangepickercontain’).remove();
});

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

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

hope this helps.

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

Romans Malinovskis on 09/29  at  01:46 AM

<p>Great work!..

...but…

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

how fix it?

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

ploutos on 09/30  at  12:29 AM

<p>Just one wish : I would really like an option that displays the 2 calendars (date range) by default. Having to click on “date range” doesn’t feel natural to me.

Great plugin! Thank you

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

Frank on 09/30  at  08:52 AM

<p>Can someone give me a code snippet to change

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

Martijn on 10/01  at  07:26 AM

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

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

Kris on 10/02  at  09:50 AM

<p>Works well but has some issues as previously mentioned (@Liam RE: UK date format).

- I use AU date format d/m/y which outputs OK but when setting a default value of the input field it selects the calendars for m/d/y (so 1/2/09 should select 1 Feb but it selects 2 Jan)

- IE gives an error “Line 125: ‘this.text’ is null or not an object”

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

Peter on 10/06  at  10:55 PM

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

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

carstep on 10/07  at  01:24 PM

<p>I again, I forget to send my comment, sorry posting doubled, remove my previous one :-)

Greet work guys / girls, it’s an awesome component

I have only few questions
- can the popup happen when I click on a button instead of an input, not jQuery UI like datepicker icon?
- does the latestDate option work right now, I could easily set other date behind the latestDate on the datepicker? e.g. I set to ‘today’, is it right so?
- why can the start date being later than the stop date?

keep on developing
r. Sandor

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

carstep on 10/07  at  01:34 PM

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

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

Albert on 10/08  at  08:24 AM

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

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

Kyle Farris on 10/19  at  10:50 AM

<p>Hi

I’m still searching for a functionality where I can peek a specific year to get the full period like 01/01/2009 to 31/12/2009 or a specific month where I get the the full period like 01/01/2009 to 31/01/2009.

Regards

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

quim831 on 10/22  at  08:54 AM

<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

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

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

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

Sun Location on 10/23  at  08:32 AM

<p>As a convenience I’ve added another option “sticky” (default true) for anyone who would rather have the widget disappear when the mouse leaves the widget rather than on click.

Last few lines of the code:
if( options.sticky )
rp.click(function(){return false;}).hide();
else
rp.mouseleave(function(){hideRP();});
return this;

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

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

Greg on 11/10  at  12:20 PM

<p>Hi,

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

Thanks

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

Adrien on 11/11  at  04:15 PM

<p>First, thanks very much for making this.&nbsp; I’m getting great use out of it, it makes my map much slicker, and I really appreciate it.

I have the same issue/request as Brian and a couple other posters.  I have the need to open the date picker on a button click as well as by clicking on the textbox. 

I have done: $("#start_date").click();
which opens the picker, but it immediately starts to close, even if my mouse makes it to the menu in time.

Is it possible to keep the menu open until the usual click trigger (inside or outside the menu)?

Thanks for any ideas and suggestions.

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

Ed on 11/13  at  06:42 PM

<p>Thanks for this great plugin!

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

Maxime on 11/23  at  09:07 AM

<p>@Scott, not sure if you have fix the issue on Safari or not from go through this post ... Just FYI that I make it work on Safari by just moving the following line ...

move
jQuery(options.appendTo).append(rp);
to the line after
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);

It seems the issue is gone after the element has been added to dom.

Hope this could be helpful ... And, really a great plugin ~ :-)

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

Tomato on 11/26  at  10:02 AM

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

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

Basil on 11/26  at  10:02 PM

<p>Hi,

I’ve been trying to get this to work:

But it keeps saying that getWeek() and setWeek aren’t functions.

I have tried including the date.js file, but then it throws up the error ‘too much recursion’.

Do you know if there is a way to get these functions to work, as it would make the overall script so much more powerful.

Happy December!
Charlie

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

Charlie on 12/01  at  09:07 AM

<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

<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

<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

<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

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

$(function() {
$("#datepicker").datepicker({altField: ‘#alternate’, altFormat: ‘yy-mm-dd’});
});

I haven’t been able to find through the doc’s on what to add.

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

Timms on 12/10  at  12:35 PM

<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

<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

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

At line 200 add this:

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

Grover Campos on 12/17  at  03:42 PM

<p>Nice work .. Keep rocking ..

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

Selva on 12/22  at  10:37 PM

<p>One thing I noticed in this great project is if the input field moved positions in the page the daterangepicker popup stayed in the old position. To resolve this I removed the following lines:

posX: rangeInput.offset().left, // x position
posY: rangeInput.offset().top + rangeInput.outerHeight(), // y position

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

and changed;

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

to:

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

in version 01.19.2008 of daterangepicker.

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

William Shostak on 01/05  at  11:00 PM

<p>Hi,

May i know how to prompt out an alert message when i click the date range?

Error message: Start Date should be before End Date.

Thanks.

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

Jessie on 01/06  at  03:16 AM

<p>The Datejs doesn’t return the right value for  “next friday +”, which works on the

“today +” works

I’m using 2 inputs

presetRanges: [
{text: ‘Today’, dateStart: ‘Today’, dateEnd: ‘today +’ },
{text: ‘Next Friday’, dateStart: ‘next friday’, dateEnd: “next friday +” },
{text: ‘Next Saturday’, dateStart: ‘next saturday’, dateEnd: “next saturday +” }

],

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

Daxon on 01/10  at  09:09 PM

<p>never mind, Used the API instead,

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

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

Daxon on 01/10  at  09:29 PM

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

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

Greg on 01/15  at  11:56 AM

<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

<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

<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

<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

<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

<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

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

onOpen: function(){
var rp = $(".ui-daterangepicker:visible");
rp.find("ul").hide();
rp.find(”.ranges").css("marginLeft", “0px");
rp.find(”.ui-daterangepicker-dateRange").trigger("click");
}

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

alex on 02/01  at  04:20 PM

<p>I have a need to use multiple date picker instances in one page and was wondering if any progress is being made towards this known “Still To do” issue?

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

SteveA on 02/02  at  02:16 PM

<p>For Multiple instances use these following code:

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

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

Varunkumar on 02/02  at  11:43 PM

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

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

<input class="datePicker1" type="text" value="4/23/99" id="rangeA" />
<input class="datePicker2" type="text" value="4/24/99" id="rangeB" />
<input class="datePicker3" type="text" value="4/25/99" id="rangeC" />
<input class="datePicker4" type="text" value="4/26/99" id="rangeD" />

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

SteveA on 02/03  at  02:34 PM

<p>Hi,

Great picker! I’d like to use the example with multiple inputs. In the example when you select today, or any single date, the second input is given the value of the first. I’m using this for a calendar application that gets confused when the end date is not null for single dates. It also looks confusing on the front-end for users. Is there a workaround to prevent this?

Alternatively, is there a simple process for parsing the single input version values to get the start and end dates into a mysql table using php?

Thanks for any help,

Tony

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

tony on 02/04  at  12:11 PM

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

Something like…

$range = $_GET[’daterange’];
$dates = explode(” to “, $range);
$dates[0]; // start date
$dates[1]; // end date

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

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

<p>Hi Scott and thanks for the quick reply.

So is it not possible to have the calendar add the single dates to only to the first input and not the second?

Thanks for the php code. I’ll try and see what I can come up with, but it sure would be a lot simpler to set the calendar script to only populate the first input on single date selections.  Seems like that should be possible.

Thanks again for the help. I’m planning on using this in a few situations, and it should work fine where I don’t need multiple inputs. If you get this figured out please let me know. There may be others with the same need?

Tony

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

tony on 02/04  at  01:15 PM

<p>Hi

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

and remove the left side (just show calender)

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

Sami on 02/10  at  05:58 AM

<p>@Sami - If you just want a simple calendar picker, use the jQuery UI datepicker plugin instead: <a href="http://jqueryui.com/demos/datepicker/" rel="nofollow">http://jqueryui.com/demos/datepicker/</a>

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

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

<p>Yes this What wanted but how you can select specific them in the link the them in the orange color and in this link

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

Sami on 02/16  at  05:00 AM

<p>How do you make the default open set to “Date range”

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

brett on 02/16  at  10:26 PM

<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

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

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

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

brett on 02/18  at  02:18 PM

<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

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

Limit maximum/minmum selectable dates
rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);

On first load read from input to date range picker the start and end dates
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().show(400);

When the two are combined the .datepicker(‘option’,… takes precedence over the pre-entered date selection.
After much code juggling and searching forums and obviously Google, I see people have had similar problems but no mention of a solution.
I would greatly appreciate any info. or workarounds

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

Matthew Scott on 02/19  at  06:14 AM

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

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

Matthew Scott on 02/19  at  06:15 AM

<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

<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

<p>blorriman,

rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);

and at the top of the plugin in the presets such as rangestarttitle and rangeendtitle add the line;

earliestDate: Date.parse(’today’), //earliest date allowed

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

Matthew Scott on 02/26  at  04:03 AM

<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

<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

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

Nice work and best regards

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

Ceana Razvan on 03/04  at  07:52 AM

<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

<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

<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

<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

// run your code here

clearTimeout(t);
};

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

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

lleto on 03/08  at  04:30 PM

<p>Hi Everyone:

Many of us wanted the “Clear” option and so Am I,but I think the authors maybe not interested or something I don’t know,but I faced a case where I don’t want the user to type anything in the input and just allow him/her just to select a date,if the user wanted to clear the field then I must have an option to clear the field which is not implemented..yet.

Anyway,the authors did a great job thanks to them but in return we need to help them right? the script is available so I modified it and implemented the Clear feature. ;-)

here is the code (I will not post whole script,just the parts that I modified):

First Part:
jQuery.fn.daterangepicker = function(settings) {
var rangeInput = jQuery(this);

//defaults
var options = jQuery.extend({
presetRanges: [
{ text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ },
{ text: ‘Last 7 days’, dateStart: ‘today-7days’, dateEnd: ‘today’ },
{ text: ‘Month to date’, dateStart: function() { return Date.parse(’today’).moveToFirstDayOfMonth(); }, dateEnd: ‘today’ },
{ text: ‘Year to date’, dateStart: function() { var x = Date.parse(’today’); x.setMonth(0); x.setDate(1); return x; }, dateEnd: ‘today’ },
//extras:
{text: ‘The previous Month’, dateStart: function() { return Date.parse(’1 month ago’).moveToFirstDayOfMonth(); }, dateEnd: function() { return Date.parse(’1 month ago’).moveToLastDayOfMonth(); } }
//{text: ‘Tomorrow’, dateStart: ‘Tomorrow’, dateEnd: ‘Tomorrow’ },
//{text: ‘Ad Campaign’, dateStart: ‘03/07/08’, dateEnd: ‘Today’ },
//{text: ‘Last 30 Days’, dateStart: ‘Today-30’, dateEnd: ‘Today’ },
//{text: ‘Next 30 Days’, dateStart: ‘Today’, dateEnd: ‘Today+30’ },
//{text: ‘Our Ad Campaign’, dateStart: ‘03/07/08’, dateEnd: ‘07/08/08’ }
],
//presetRanges: array of objects for each menu preset.
//Each obj must have text, dateStart, dateEnd. dateStart, dateEnd accept date.js string or a function which returns a date object
presets: {
specificDate: ‘Specific Date’,
allDatesBefore: ‘All Dates Before’,
allDatesAfter: ‘All Dates After’,
dateRange: ‘Date Range’,
clear: ‘Clear’
},
rangeStartTitle: ‘Start date’,
rangeEndTitle: ‘End date’,
nextLinkText: ‘Next’,
prevLinkText: ‘Prev’,
doneButtonText: ‘Done’,
clearValue: ‘’,
earliestDate: Date.parse(’-15years’), //earliest date allowed
latestDate: Date.parse(’+15years’), //latest date allowed
rangeSplitter: ‘-’, //string to use between dates in single input
dateFormat: ‘m/d/yy’, // date formatting. Available formats: http://docs.jquery.com/UI/Datepicker/&#x24;.datepicker.formatDate
closeOnSelect: true, //if a complete selection is made, close the menu
arrows: false,
posX: rangeInput.offset().left, // x position
posY: rangeInput.offset().top + rangeInput.outerHeight(), // y position
appendTo: ‘body’,
onClose: function() { },
onOpen: function() { },
onChange: function() { },
datepickerOptions: null //object containing native UI datepicker API options
}, settings);

//custom datepicker options, extended by options
var datepickerOptions = {
onSelect: function() {
if (rp.find(’.ui-daterangepicker-specificDate’).is(’.ui-state-active’)) {
rp.find(’.range-end’).datepicker(’setDate’, rp.find(’.range-start’).datepicker(’getDate’));
}
else if (rp.find(’.ui-daterangepicker-clear’).is(’.ui-state-active’)) {
rangeInput.val(options.clearValue);
return;
}

if (!rp.find(’.ui-daterangepicker-clear’).is(’.ui-state-active’)) {
var rangeA = fDate(rp.find(’.range-start’).datepicker(’getDate’));
var rangeB = fDate(rp.find(’.range-end’).datepicker(’getDate’));

//send back to input or inputs
if (rangeInput.length == 2) {
rangeInput.eq(0).val(rangeA);
rangeInput.eq(1).val(rangeB);
}
else {
rangeInput.val((rangeA != rangeB) ? rangeA + ‘ ‘ + options.rangeSplitter + ‘ ‘ + rangeB : rangeA);
}
}
//if closeOnSelect is true
if (options.closeOnSelect) {
if (!rp.find(’li.ui-state-active’).is(’.ui-daterangepicker-dateRange’) && !rp.is(’:animated’)) {
hideRP();
}
}
options.onChange();
},
defaultDate: +0
};

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

//datepicker options from options
options.datepickerOptions = (settings) ? jQuery.extend(datepickerOptions, settings.datepickerOptions) : datepickerOptions;

//Capture Dates from input(s)
var inputDateA, inputDateB = Date.parse(’today’);
var inputDateAtemp, inputDateBtemp;
if (rangeInput.size() == 2) {
inputDateAtemp = Date.parse(rangeInput.eq(0).val());
inputDateBtemp = Date.parse(rangeInput.eq(1).val());
if (inputDateAtemp == null) { inputDateAtemp = inputDateBtemp; }
if (inputDateBtemp == null) { inputDateBtemp = inputDateAtemp; }
}
else {
inputDateAtemp = Date.parse(rangeInput.val().split(options.rangeSplitter)[0]);
inputDateBtemp = Date.parse(rangeInput.val().split(options.rangeSplitter)[1]);
if (inputDateBtemp == null) { inputDateBtemp = inputDateAtemp; } //if one date, set both
}
if (inputDateAtemp != null) { inputDateA = inputDateAtemp; }
if (inputDateBtemp != null) { inputDateB = inputDateBtemp; }

//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function() {
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);
jQuery.each(options.presetRanges, function() {
jQuery(’<li class="ui-daterangepicker-’ + this.text.replace(/ /g, ‘’) + ‘ ui-corner-all">‘ + this.text + ’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)
.appendTo(ul);
});
var x = 0;
jQuery.each(options.presets, function(key, value) {
if (key == ‘clear’)
{ jQuery(’<li class="ui-daterangepicker-’ + key + ‘ preset_’ + x + ‘ ui-helper-clearfix ui-corner-all">‘ + value + ’</li>’).appendTo(ul); }
else
{ jQuery(’<li class="ui-daterangepicker-’ + key + ‘ preset_’ + x + ‘ ui-helper-clearfix ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span>‘ + value + ’</li>’).appendTo(ul); }
x++;
});

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

if (jQuery(this).is(’.ui-daterangepicker-specificDate’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.presets.specificDate);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-end’).text(options.presets.allDatesBefore);
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
rp.find(’.range-end’).restoreDateFromData().show(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.presets.allDatesAfter);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-dateRange’)) {
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.rangeStartTitle);
rp.find(’.title-end’).text(options.rangeEndTitle);
rp.find(’.range-start’).restoreDateFromData().show(400);
rp.find(’.range-end’).restoreDateFromData().show(400);
setTimeout(function() { doneBtn.fadeIn(); }, 400);
}
else if (jQuery(this).is(’.ui-daterangepicker-clear’)) {
doneBtn.hide();
rpPickers.hide();
rp.find(’.ui-datepicker-current-day’).trigger(’click’);
}
else {
//custom date range
doneBtn.hide();
rp.find(’.range-start, .range-end’).hide(400, function() {
rpPickers.hide();
});
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) : jQuery(this).data(’dateStart’)();
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’)();
rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);
rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’).trigger(’click’);
}

return false;
}

That’s it!

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

alaa9jo on 03/09  at  03:02 AM

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

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

rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);

Change that with:

rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’);

We remove the triggering of click event on the start date to prevent onClose firing when the start date has been changed.

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

James Alvarez on 03/10  at  08:57 AM

<p>I am also getting this in IE8/Win7/64

Line: 126
Char:4
‘this.text’ is null or not an object
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)

Which fails the script (runs in FF ok).

Couldn’t find a solution so far in my search - does anybody have a suggestion?

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

Stephen on 03/21  at  03:03 AM

<p>If any problems in using it with ASP.NET validations then you may get length is null or not an object. Here is the complete solution for it.

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

Praveen Battula on 03/25  at  10:29 PM

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

rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

So the function looks like:

function showRP(){
if(rp.data(’state’) == ‘closed’){
rp.parent().css(’left’, rangeInput.offset().left);
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

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

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

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

Bazmo on 03/25  at  11:29 PM

<p>I’ve got a problem with french accents.

In presets I set specificDate: ‘Date spécifique’.
The menu shows “Date sp?cifique” but the datePicker’s title is correct.

If I set the HTML entity - specificDate: ‘Date spécifique’
It appears correctly in the menu, but the datePicker’s title appears as ‘Date spécifique’

You should change the way you set text in the script.
If you allow the user to display HTML entities, you should replace on line 204
rp.find(’.title-start’).text( options.presets.specificDate )
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.

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

Raccoon on 03/27  at  10:44 AM

<p>woops ...

The third paragraph of my previous comment was :

If I set the HTML entity - specificDate: ‘Date sp&eacute;cifique’
It appears correctly in the menu, but the datePicker’s title appears as ‘Date sp&eacute;cifique’

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

Raccoon on 03/27  at  10:46 AM

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

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

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

<p>Try to show march month on this year (2011,2016,2022).

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

Sami on 03/31  at  02:58 AM

<p>Very nice control!

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

bitlink web on 03/31  at  01:09 PM

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

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

bitlink web on 03/31  at  01:11 PM

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

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

Nauman Akhtar on 04/02  at  03:10 AM

<p>hey - still having difficulty making this work with IE7:

Calling via:

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

in IE fails, with error:
‘this.text’ is null or not an object
daterangepicker.jQuery.js line 125
Code: 0 Char 4

Any help? What is the simple thing I’m missing to make this work for IE as wel? :-(

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

Stephen on 04/05  at  02:41 AM

<p>How do I remove/disable some of the presets?

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

valya on 04/05  at  12:46 PM

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

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

Scott on 04/06  at  06:17 PM

<p>@Scott I just performed a very quick test with jquery 1.4.2 and jquery-ui 1.8 and all seemed fine.

I didn’t do anything more than replace the references to jquery and jquery-ui in the sample index.html file though.

What specifically have you found to not work with jquery 1.4.2 and jquery-ui 1.8?

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

Alex on 04/06  at  10:31 PM

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

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

Scott on 04/07  at  11:10 AM

<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

<p>@Scott:

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

if( (typeof settings.posX === “undefined") || settings.posX === null)
rp.parent().css(’left’, rangeInput.offset().left);
if( (typeof settings.posY === “undefined") || settings.posY === null)
rp.parent().css(’top’, rangeInput.offset().top + rangeInput.outerHeight());

This will still allow you to override the position with posX and posY if required but will otherwise re-calculate the position when the input is clicked.

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

Alex on 04/07  at  10:30 PM

<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

<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

<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

<p>Hi all.

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

Alexey on 04/11  at  12:55 PM

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

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

chris on 04/11  at  01:47 PM

<p>why don’t use  the positioning with the new position tool ? and replace the wrapping and positioning code with :

//wrap and position
rp.wrap(’<div class="ui-daterangepickercontain"></div>’).parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

And play with posX and posY as offsets ?

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

chris on 04/13  at  06:08 PM

<p>Just un addon : I  also implement it in the showRP method in order to avoid some browser problems with hidden parents.

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});
.............

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

chris on 04/13  at  06:14 PM

<p>The previous  modification was not so convenient for me because I’m using 2 fields, dedicated to start and end dates. So the rangepicker hid the second field. So I decided to implement a new option called position (as done in ui.tooltip).

The defaults are :
position: {
my: “left top”,
at: “left bottom”,
offset: “0 0”
},

The code :

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position(jQuery.extend(options.position, {of: rangeInput}));

and near line 285 :
rp.wrap(’<div class="ui-daterangepickercontain"></div>’).parent()
.position(jQuery.extend(options.position, {of: rangeInput}))

So in my code I can now use for example :
position: {
my: “left top”,
at: “right top”,
offset: “2 -70”
}

With this , the rangepicker now appears at the right top of the start field, with a vertical offset of -70 as shown here : http://www.krisszone.com/images/right-range.png

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

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

chris on 04/15  at  04:02 PM

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

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

sjc on 04/20  at  08:26 AM

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

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

sjc on 04/20  at  09:20 AM

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

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

neel on 04/23  at  07:44 AM

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

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

Vince on 04/23  at  09:26 AM

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

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

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

<p>here’s my implementation of first/end restriction

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

with

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

I also implemented the highlight of both end and start date but I don’t have it in my version here.
I’ll post it later.

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

chris on 04/23  at  11:44 AM

<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

<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

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

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

Vince on 04/24  at  05:39 AM

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

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

stephane on 04/27  at  10:35 AM

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

Can’t seem to figure out why.  Any ideas?

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

Jon on 04/28  at  10:10 PM

<p>impressive, it’s just that it’s not what i’m looking for.

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

Adam on 04/29  at  09:40 PM

<p>Hi

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

<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

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

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

<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

<p>Seems my first comment was rejected.

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

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

Woo!

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

Federico Holgado on 05/16  at  08:59 AM

<p>Hi All, I have a panel that I hide when I finish with it and then load a different panel (it’s kind of a wizard).

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.

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

Elad on 05/21  at  01:05 PM

<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

<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

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

var iA = ‘today’;
var iB = ‘today’;
if (rangeInput.val().split(options.rangeSplitter).length > 0) {
var iA = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[0].trim());
}
if (rangeInput.val().split(options.rangeSplitter).length == 2) {
var iB = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[1].trim());
}

inputDateAtemp = iA;
inputDateBtemp = iB;

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

Jaroslav Moravec on 06/10  at  04:27 AM

<p>this is the best date time picker yet

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

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

roy on 06/12  at  05:50 AM

<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

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

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

SAN on 06/15  at  02:00 PM

<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

<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

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

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

JasonM on 06/24  at  09:36 AM

<p>Hi guys,

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

plz help .....

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

samir on 06/30  at  02:02 AM

<p>NiksKniz say: Idea shaking, I support.

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

morsest on 07/02  at  09:31 AM

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

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

Rajesh on 07/14  at  01:50 AM

<p>Love the plugin!

How can I short-circuit it so that I don’t see presets?  That is, it goes directly to the date range selector?  I just need side-by-side calendars, without the presets…

Anyone have any luck doing this?

TIA.

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

dwenr on 07/17  at  11:10 PM

<p>Hi,

I’ve applied this to two textboxes, and it’s working well. However, I don’t want the menu to pop up when the user click the second i.e. ‘To’ textbox. How can I achieve this?

Regards,
Karan

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

karan on 07/19  at  01:25 AM

<p>Hi there,

before anything else, thank you very much for this amazing widget, i need to show the daterangepicker clicking in a link or image, is there any way to do this?

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

doesn work for me, any help?

Thanks in advance.

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

Diego Rin on 07/22  at  10:51 AM

<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

<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

<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

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

<%@ page language="java" %>
<%@ taglib uri="/taglib/struts-html" prefix="html" %>

<html>
<head>
‘>
‘ >
‘ >
‘ >
<link href="<html:rewrite page="/css/jquery-ui.custom.css"/>" rel="stylesheet" type="text/css">
<link href="<html:rewrite page="/css/ui.daterangepicker.css"/>" rel="stylesheet" type="text/css">


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

<head>

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

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

Jean on 07/26  at  12:19 PM

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

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

Nicholas Calugar on 07/26  at  12:33 PM

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

<html>
<head>



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


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

<head>

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

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

Jean on 07/27  at  09:33 AM

<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

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

http://pastebin.com/XrmL3kis

Thanks.

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

Jean on 07/27  at  04:53 PM

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

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

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

Nicholas Calugar on 07/27  at  05:14 PM

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

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

Rashid on 08/03  at  06:20 AM

<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

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

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

Danny on 08/05  at  10:24 PM

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

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

VizjereiX on 08/06  at  02:13 AM

<p>Thank you for this tool!

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

Cheers.

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

Murphy on 08/10  at  05:38 PM

<p>I found a solution, but I think I also found a bug.

Instead of text inputs, I had been trying to use hidden inputs, image inputs, and even divs. My intent was to then get the “value” attribute of those objects with a function called by daterangepickers’s onClose event.

For example:

myOnClose = function() {
var rangeA_value = document.getElementById(’rangeA’).value;
var rangeB_value = document.getElementById(’rangeB’).value;
// do stuff with range here
}

What happens with this, however, is that when selecting an option with the same start and end range (e.g., Today or Yesterday), rangeB_value is set to the prior value. I found that this was still happening when using normal text fields, even though the rendered text fields were showing the correct value.

Something similar happens when only using one input. The actual text field is updated correctly, but when trying to access it’s value from JavaScript, it takes the form of “Range A to Range B” where Range B is the previous set value.

I found the following fix (works in FF, Safari and IE):

myOnClose = function() {
setTimeout(’myOnClose_delayed’,0);
}
function myOnClose_delayed = function() {
var rangeA_value = document.getElementById(’rangeA’).value;
var rangeB_value = document.getElementById(’rangeB’).value;
// do stuff with range here
}

For whatever reason, a timeout of even 0 milliseconds allows the correct value to be set. I originally tried the timeout because I thought perhaps onClose was being called to quickly, but maybe it has to do with separating a direct reference rather than timing?

Regardless, this is working. I can now create multiple elements to use with Date Range Picker: the first two are hidden elements, and subsequent ones are buttons (this did require changing “...if(rangeInput.length == 2)...” in the datepickerOptions method to “...(rangeInput.length > 1)...” in daterangepicker.jQuery.js), then processing the results with a timed-out onClose script.

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

Murphy on 08/10  at  07:22 PM

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

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

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

Nick on 08/13  at  12:48 PM

<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

<p>@LennyPain:

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

$(’#myinput’).daterangepicker( { datepickerOptions: { firstDay: 1} } );

This will set the first day of week to Monday,days of week are zero-index;
0:Sunday,1:Monday,2:Tuesday,....etc

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

alaa9jo on 08/16  at  02:45 AM

<p>Excellent! Now it’s working like a charm. Thank you for your help!

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

LennyPain on 08/16  at  11:55 AM

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

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

Johngi on 08/17  at  06:26 PM

<p>Hello friends,

I have tried to implement date range picker control. You can get the code at this link
http://aspnet-ajax-aspnetmvc.blogspot.com/2010/09/jquery-date-range-plugin.html

Please suggest me to make it more better.

Thanks,
Mohan Prajapati

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

Mohan on 09/03  at  05:33 AM

<p>Two questions ?

1.  in case of selecting date range. Can the dates before the start date be greyed out for the selection of end date?

2. how can the left pane disabled for date range selection?

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

Kumar Saurav on 09/07  at  04:22 AM

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

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

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

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

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

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

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

Based on those rules, I made my changes to daterangepicker.jQuery.js. The modified version is available here - http://pastebin.com/YnktMFXb

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

IYS on 09/09  at  05:23 PM

<p>Hey guys just wanted to let you know an easy way to make the Instance management work with more than one date range widget on a screen. All you need to do is wrap your inputs with a span class:

then modify the onClick event in the pluggin

jQuery(this).click(function(){
//calls parent so we can have more than one picker on the screen
rangeInput = jQuery(this).parent().find("input"); //calls wrapped inputs
toggleRP();
return false;
});

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

Darren on 09/09  at  05:40 PM

<p>If you are using i18n you will need to do something like this to make the calendar work with other languages. You of course need to add the jquery i18n js file for other languages

$("input").daterangepicker({
dateFormat:"MM dd yyyy”,
datepickerOptions: $j.extend({},
$j.datepicker.regional[’de’], { //germany
showStatus: true, //this is just a datepicker option
showOn: “both”,//this is just a datepicker option
changeYear :true//this is just a datepicker option
})
});

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

Darren on 09/09  at  05:44 PM

<p>I might sugges you change the event type from click to jQuery(this).bind("click focus”,function(){… to make visible

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

Darren on 09/10  at  03:43 PM

<p>Hello,

- 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

<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

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

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="” />

I found out that once I changed the value of date field like this:

var datum = some calculated value;
$("#datuman").val(datum);

The datepicker wont highlight start and end date nor the arrows for previous and next work. Also, it doesn’t highlght start and end date even if You set the date on input field through HTML:

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="01-Aug-2010 to 31-Aug-2010” />

It also doesn’t work when You pick one of the presets. For example You pick previous month, it populates input field correctly, but when You click on input field again, start and end date aren’t highlighted.

That problem bugged me for more then 10 hours and I finally solved it.
First of all I added a change trigger after setting the value fo input field dynamically like this:

$("#datuman").val(datum).trigger("change");

My daterangepicker initialization (I have more optmized version of this, fewer lines, but I intentionally write it like this for better understanding):

$(’#datuman’).daterangepicker({
arrows:true,
dateFormat: ‘d-M-yy’,
rangeSplitter: ‘to’,
datepickerOptions: {changeMonth: true, changeYear: true},
onChange: function() {
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if (datumopseg[1] == “")
{
datumopseg[1] = new Date();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
},
onOpen: function(){
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if (datumopseg[1] == “")
{
datumopseg[1] = new Date();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
}
});

Now, everything is working as I wanted, start and end date are always highlighted with the proper values from input field.

Regards

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

Bosko on 09/16  at  06:56 PM

<p>I posted uncomplete solution, this part is slightly corrected:

onChange: function() {
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if ((datumopseg[1] == “") || (datumopseg[1] == undefined))
{
datumopseg[1] = new Date();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
},
onOpen: function(){
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if ((datumopseg[1] == “") || (datumopseg[1] == undefined))
{
datumopseg[1] = new Date();
}
$(”.preset_3").trigger("click");
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
}

Regards

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

Bosko on 09/16  at  07:11 PM

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

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

Observative on 09/23  at  11:58 PM

<p>Nice Project! But there’s a bug in daterangepicker.jQuery.js on line 145.

All activated dates will be removed with this line:

rp.find(’.ui-state-active’).removeClass(’ui-state-active’);

This has to change, because activated dates in the calendar may not be removed: Change to:

rpPresets.find(’.ui-state-active’).removeClass(’ui-state-active’);

Regards Jens N.

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

Jens Neumann on 09/29  at  03:16 AM

<p>Very nice and easy to customize, however I’m having trouble using the value.

Also, I was not able to use it as an iframe. The format was conflicting with other functions; seems too difficult without instructions for setting up the anchor tag with class="iframe" (I guess), something I’m not familiar with.

Form using:
...
$(’#range_a’).datepicker
...
and

<input type="text" value="today" id="range_a">

Then on the database request:

$DateRange = $_GET[’range_a’];
$Dates = explode(” - “ , $DateRange);
$DateStart = (date("U" , strtotime($Dates[0]))*1000); // need UTC in ms
$DateEnd = (date("U" , strtotime($Dates[1]))*1000); // need UTC in ms

This gives me nothing (it seems), but if I hard code a value for $DateRange= the database script executes.

This is on an AJAX request form that has other variables passed the same way, and they are working.

Thanks!

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

C S R on 09/29  at  03:39 PM

<p>Can anyone tell me how to integrate time to this such a cool plug-in?

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

beeko on 10/01  at  09:13 PM

<p>Great plugin!

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

eyalec on 10/03  at  08:00 AM

<p>Disregard that. I was using server textboxes…

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

eyalec on 10/03  at  08:21 AM

<p>A little hack to select date range by default and mark the input dates as selectable:

First change: restoreDateFromData

jQuery.fn.restoreDateFromData = function( first ){
if(jQuery(this).data(’saveDate’)){
jQuery(this).datepicker(’setDate’, jQuery(this).data(’saveDate’)).removeData(’saveDate’);
}
else{
jQuery(this).datepicker(’setDate’, first?inputDateA:inputDateB);
}
return this;
}

Second change: showRP

function showRP(){
if(rp.data(’state’) == ‘closed’){
rp.data(’state’, ‘open’);
rp.fadeIn(300);
options.onOpen();
rp.find(’.ui-daterangepicker-dateRange’).click();
}
}

Third change: clickActions

jQuery.fn.clickActions = function(rp, rpPickers, doneBtn){
if(jQuery(this).is(’.ui-daterangepicker-specificDate’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text( options.presets.specificDate );
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).restoreDateFromData(false).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-allDatesBefore’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-end’).text( options.presets.allDatesBefore );
rp.find(’.range-start’).saveDateToData().datepicker(’setDate’, options.earliestDate).hide(400);
rp.find(’.range-end’).restoreDateFromData(false).show(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-allDatesAfter’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text( options.presets.allDatesAfter );
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).saveDateToData().datepicker(’setDate’, options.latestDate).hide(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else if(jQuery(this).is(’.ui-daterangepicker-dateRange’)){
doneBtn.hide();
rpPickers.show();
rp.find(’.title-start’).text(options.rangeStartTitle);
rp.find(’.title-end’).text(options.rangeEndTitle);
rp.find(’.range-start’).restoreDateFromData(true).show(400);
rp.find(’.range-end’).restoreDateFromData(false).show(400);
setTimeout(function(){doneBtn.fadeIn();}, 400);
}
else {
//custom date range
doneBtn.hide();
rp.find(’.range-start, .range-end’).hide(400, function(){
rpPickers.hide();
});
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) : jQuery(this).data(’dateStart’)();
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’)();
rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’).trigger(’click’);
rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’).trigger(’click’);
}
return false;
}

That did the job for me ^^.

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

Aldo_MX on 10/05  at  11:40 AM

<p>*mark the input dates as selected (sorry)

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

Aldo_MX on 10/05  at  11:41 AM

<p>Tue, 5 Oct 2010.

I ran into a problem with IE8 not initializing the daterangepicker.
This was the this error:

Message: ‘this.text’ is null or not an object
Line: 145
Char: 4
Code: 0
URI: js/daterangepicker.jQuery.js

After a little debugging i found that one of the object strings was undefined and thus causing the error.

So here is my work around. I added an if statement to check for the “undefined” string and ignore it.

(Original code)
//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function(){
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);
jQuery.each(options.presetRanges,function(){
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)
.appendTo(ul);
});

(New code)
//build picker and
var rp = jQuery(’<div class="ui-daterangepicker ui-widget ui-helper-clearfix ui-widget-content ui-corner-all"></div>’);
var rpPresets = (function(){
var ul = jQuery(’<ul class="ui-widget-content"></ul>’).appendTo(rp);
jQuery.each(options.presetRanges,function(){

if(this.text != undefined){
jQuery(’<li class="ui-daterangepicker-’+ this.text.replace(/ /g, ‘’) +’ ui-corner-all">‘+ this.text +’</li>’)
.data(’dateStart’, this.dateStart)
.data(’dateEnd’, this.dateEnd)
.appendTo(ul);
}
});

I hope that it helps someone else!!

Regards

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

Gray on 10/05  at  03:29 PM

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

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

Benjamin Nolan on 10/08  at  06:05 AM

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

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

Benjamin Nolan on 10/08  at  06:07 AM

<p>Hi,

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

ginnn on 10/18  at  10:50 AM

<p>I tried this in var datepickerOptions :

if(rp.find(’.ui-daterangepicker-dateRange’).is(’.ui-state-active’)){
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’ ,’+0d’ );
rp.find(’.range-end’).datepicker(’option’, ‘minDate’ ,’-2m’ );
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’ ,’+0d’ );
rp.find(’.range-start’).datepicker(’option’, ‘minDate’ ,’-2m’ );
}

but i cant select date now....

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

ginnn on 10/18  at  11:24 AM

<p>Is there a way to set the max date range dynamically?

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

Josh on 10/23  at  02:04 PM

<p>Im facing a particular problem here is the code

<link href="../../../../Content/ui.daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" title="ui-theme"
type="text/css" />

$(function () {
$(’#rangeA’).daterangepicker({ presetRanges: [{ text: ‘My Range’, dateStart: ‘Today’, dateEnd: ‘Today’}] });

});
<input type="text" value="4/23/99" id="rangeA" />

im getting object dosen’t support property or method at the line below
var rpPickers = jQuery(’<div class="ranges ui-widget-header ui-corner-all ui-helper-clearfix"><div class="range-start"><span class="title-start">Start Date</span></div><div class="range-end"><span class="title-end">End Date</span></div></div>’).appendTo(rp);
rpPickers.find(’.range-start, .range-end’).datepicker(options.datepickerOptions);

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

rakesh on 10/26  at  02:38 AM

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

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

Canadaboy on 10/26  at  02:52 AM

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

//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});
if(rp.data(’state’) == ‘closed’){
rp.data(’state’, ‘open’);
rp.fadeIn(300);
options.onOpen();
}
}

What we are doing is adding the following line:
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});

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

Canadaboy on 10/26  at  03:55 AM

<p>Very good if the next version support :

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

basur on 11/02  at  04:09 AM

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

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

DEN on 11/03  at  04:11 AM

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

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

Samuel Brasington on 11/17  at  01:41 PM

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

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

Todd Ryks on 11/17  at  06:51 PM

<p>Doesn’t work in Opera 10 with jQuery 1.4.4 :(

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

SAN on 11/19  at  02:29 AM

<p>I really like your plugin, but was wondering about non-sequential date picking.&nbsp; Any ideas where to start to implement something like this?

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

Chris on 11/22  at  03:54 PM

<p>@Todd Ryks: just add a calendar icon next to the textbox, and copy the event from the datepicker to that image. I used the CopyEvent plugin, like this:

$(’#datePicker’).copyEventsTo(’#openCalendarImage’);

Also, if you *don’t* want the calendar to open up by clicking the textbox, just remove the events :

$("#datePicker").unbind();

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

Shaun on 11/24  at  12:04 PM

<p>Hi there! i’m implementing this plugin on a php form using the arrows option. How can i set an initial date when form loads to work with arrows?

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

davidv on 11/29  at  04:36 AM

<p><a href="http://datepicker.org.ru/" rel="nofollow">http://datepicker.org.ru/</a>

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

guest on 11/30  at  07:38 AM

<p>Hi all.

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

sigara bırakma on 12/01  at  06:00 AM

<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

<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

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

i made a little hack to fix it by changing the plugin js file

function showRP() {
if (rp.data(’state’) == ‘closed’) {
rp.data(’state’, ‘open’);
rp.find(”.ui-datepicker").css("display", “inline-block"); //Changed by Daniel
rp.fadeIn(300);
options.onOpen();
}
}
function hideRP() {
if (rp.data(’state’) == ‘open’) {
rp.data(’state’, ‘closed’);
rp.find(”.ui-datepicker").css("display", “none"); //Changed by Daniel
rp.fadeOut(300);
options.onClose();
}
}

hope thats help

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

Daniel Jaffe on 12/16  at  11:26 AM

<p>Hi, i want to open the datarange picker with an img next to the input? any ideas?

i try this:

$("#form .items img").css({cursor: “pointer"}).click(function(){ $(this).prev().click().focus();});

but the datarangepicker fadein and fadeout.

Arnold

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

Arnold Roa on 12/27  at  06:23 PM

<p>Sexy. This made my evening, Thank You!

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

Christopher on 12/27  at  08:43 PM

<p>Thanks a bunch Daniel Jaffe, you saved my butt on this one!

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

Tyler Eckberg on 12/29  at  05:43 PM

<p>2 events are sent on change.

//Set values first, then raise events
var ds = rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’);
var de = rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’);
//ds.trigger(’click’);//de.click enough
de.trigger(’click’);

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

LudoO on 01/19  at  05:42 AM

<p>Hi,

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

Richard Korebrits on 01/21  at  04:39 AM

<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

<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

<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

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

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

steve on 02/03  at  05:36 AM

<p>Rodrigo, I wanted to let you know I just upgraded to 1.8.9 and I’m still having the same problems. I wish I had my 1.8.7 files.

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

Todd on 02/03  at  10:52 AM

<p>I’ve got the same problem with the upgrade to jQuery-UI 1.8.9.

I finally came up with a temporary fix. You can download it here : http://coumont.fr/archives/FilamentGroup_daterangepicker_bugfix.zip (see file js/daterangepicker.jQuery.new.js )

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

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

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

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

Etienne Coumont on 02/06  at  06:03 AM

<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

<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

<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

<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

<p>Hi

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

Reshab on 02/25  at  11:25 PM

<p>Hi,

Thanks,
Vikrant

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

Vikrant on 03/03  at  04:43 PM

<p>@Vikrant

You can customize your Theme from left panel settings in Roller from http://jqueryui.com/themeroller/

After customizing Download Theme Roller and extract it in your project directory and replace or apply customized css file path in your html code. then Datepicker automatically take your customized CSS style.. :)

Thanks,
Haresh

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

Haresh on 03/04  at  02:26 AM

<p>If I use presets: with presetRanges: option I got the missing function error, so I just don’t use the presets: option any more.

Great work!

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

Gudata on 03/07  at  11:33 AM

<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

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

Mohan Ram on 03/09  at  01:08 AM

<p>Hi Mohan Ram

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

Haresh on 03/09  at  04:25 AM

<p>Disadv of using onClose function

While using previous and next button i cant trigger function [Whenever changes occurs i need to trigger a function] Say me a simple possibility

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

staytouch on 03/09  at  04:31 AM

<p>@Etienne Thanks dude..&nbsp; Was banging my head on the keyboard for awhile on that one!

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

Paul Vernon on 03/09  at  11:57 AM

<p>How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page same qustion

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

Wibawa on 03/10  at  11:18 AM

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

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

staytouch on 03/15  at  12:59 AM

<p>prev and next event not work onchange event

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

arunkumar.p on 03/18  at  12:38 AM

<p>It worked for me ,thanks :)

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

Wordpress Developer on 03/20  at  11:21 AM

<p>is this still working

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

Evan on 03/22  at  02:53 AM

<p>Thaks for the post

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

Eric on 03/22  at  04:03 AM

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

$(’#time’).daterangepicker({
datepickerOptions: {
showOn: “button”,
buttonImage: “images/calendar_icon.gif”,
buttonImageOnly: true
}
});

Suggestions?

Thanks!

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

Kate on 03/27  at  11:20 PM

<p>Hi,

Great plugin! one visual improvement I would love to see implemented would be to highlight all dates inside a date range. I haven’t found any jQuery plugin that does that.

Thanks!

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

Luigi on 03/31  at  07:59 PM

<p>Hi, check out our jQuery Event Calendar: <a href="http://www.dcs-solution.com/blog/?p=22#more-22" rel="nofollow">http://www.dcs-solution.com/blog/?p=22#more-22</a>

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

DCS Solution on 04/14  at  08:22 AM

<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

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

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

DCS Solution on 04/14  at  09:19 AM

<p>Hi,