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

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

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

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!

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

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

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

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

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.

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!

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.

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

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?

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

Thanks

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

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

Hey Maggie thanks this work very good

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

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

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

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>

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

This is awesome! Great in FF3!

But in IE8 with even compatibility mode gives bugs…

Btw really awesome contribution wow!

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

Kepe it up!

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)

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

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

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

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

Hi !
I love your script !

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

So i tried something like that :

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

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

but of course it doesn’t work ^_^

If someone may have an idea, will be cool !

And good work again !

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?

forgot the link to the example: http://www.filamentgroup.com/examples/daterangepicker_v2/

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

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.

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

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

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.

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

ok, it does work with 1.3 - at least somewhat.  But if I modify your sample page to
$(’input’).daterangepicker({presetRanges: [], presets: ["specificDate", “dateRange"]});
I get a limited choice of presets (which is what I want) but when I select one I get
jQuery(this).data("dateStart") is not a function
[Break on this error] var dateStart = (typeof jQuery(this)...t’)) : jQuery(this).data(’dateStart’)();
in firebug

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

to my first post i wanted to add some more information:
what i am trying to do atm is using the onOpen function to set the start and end date.

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

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

@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

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

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

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

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

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

is not getting me the preselected dates highlighted.

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

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

is this intended or am i doing again something wrong?

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

thx for any advise

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

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

Thnaks

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.

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.

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.

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

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

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

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

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

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

<%= f.submit “Create” %>

<% end %>

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

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

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

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

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

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

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

Thanks Scott

Translation is complete now.

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

Scott,

That did it!  Thanks for your help

Regards

Bob

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.

ok got it. and I got more than one instance working on the page as well by giving it a unique class name to call it by.  then I just put each of them in their own $(document).ready(function() {
$(’input.rangeA’).click(function() {
$(’input.rangeA’).daterangepicker({
appendTo: ‘#dateDiv’
});
});
instead of init.
where rangeA is unique and datediv is unique too that way the popup shows up where it should.

very nice little datepicker, my compliments.

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

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

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

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.

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

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

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

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.

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

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

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.

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

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

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

Works like a champ! Thanks!

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

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

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

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

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

Workaround about “dateStart is not a funtion”.
I’ve patched daterangepicker.jQuery.js
Change lines:
var dateStart = (typeof jQuery(this).data(’dateStart’) == ‘string’) ? Date.parse(jQuery(this).data(’dateStart’)) :
jQuery(this).data(’dateStart’);
var dateEnd = (typeof jQuery(this).data(’dateEnd’) == ‘string’) ? Date.parse(jQuery(this).data(’dateEnd’)) : jQuery(this).data(’dateEnd’);

by:

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

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

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

Other than that, great work. :)

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.

comments on?

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

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

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

Could someone shed some light on this?  Thanks

Hi,

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

Thank you for a nice plugin.

Error in daterangepicker.js - function fDate(date) the date parameter is null. This happens when i select the end date first..
Please fix it.

Thanks for the good calender plug in :)

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

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?

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

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

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

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

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

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

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

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

I forgot you also have to pass “doneBtn”.

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

Bug or have I done something wrong?
When loading the page I get this error:
“rangeInput.val() is undefined”
on line 106 of daterangepicker.jQuery.js
which is this::

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

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

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

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

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.

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

Thanks Scott, got it all to work now.

Noted on the passing of functions too.

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

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.

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

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?

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

Thank you for the help and congrats for this tool!

Is the onClose event firing 3 times for anyone else?

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

Any help would be greatly appreciated.

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

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

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?

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

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

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

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

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

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

What am I missing?

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

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

datepicker default option firstDay not working ;(

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.

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

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

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

Mastyf,

I set the first day to Monday using

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

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

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.

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

Better :-) But onClose doesn’t fire when navigating with the arrows, though.
Any other event I can use to detect that?

Thanks for a great plugin btw.

Thanks a lot for ur script…

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

Thanks,
RathikaPoobalan

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

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

is that code really useful?

Feature to add :
Multi date selection highlights

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

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.

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.

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

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?

Trying to set up quarterly preset ranges and trying to do it dynamically.
I have

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

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

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


thanks

never mind - got the year via javascript
thanks

Quarters would also make a great new feature.

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.

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.

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

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

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

IE problem fixed.  Thanks.  Great plugin BTW

Fantastic plugin! looks and works great. 

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

Thanks in advance!

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)

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.

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

Example with multiple date selects using Jquery.

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

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

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

Any thoughts?

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,

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

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

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

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

dave

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.

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

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

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

I tried the following but i’m getting an error:
datepickerOptions: $(’#<%= Textbox1.ClientID %>’).datepicker({ changeYear: true });

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

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

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”

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

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

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

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

Nobutaka from Japan

In my first message I forgot to say that the script is great after all.
And I discovered (reading previous comments) how to hide ranged selections (but maybe you could document that).

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

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

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.

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

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

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

Any ideas/thoughts?  Thanks,

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

<!-- -->

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

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

}); // END :: ready function

</head>

<body>

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

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

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

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

<sXcript type="text/javascript\" src="{PATH TO}/jquery-1.3.1.min.js">
Sorry - looks like the script tags were stripped out from my post above

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

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

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

<!-- -->

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

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

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?

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

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

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

Anything with only a popup calendar?

Pretty nice post. I just stumbled upon your site and wanted to say
that I’ve really liked reading your blog posts. In any case
I’ll be subscribing to your feed and I hope you post again soon!

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

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

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?

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

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

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

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!

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/

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?

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

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

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!

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

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?

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

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

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

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

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.

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

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

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

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?

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

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!

Hello,
I have a form that has 10 fields, and i will like to use this date range picker on only one field. How do i go about that? I have try changing $(’input’).daterangepicker( ); to $(’input_date’).daterangepicker( ); and the date picker does not show, here is my input box:
<input type="text" value="Select a date” id="input_date" name="input_date"/>

@shaun :

try

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

instead of

$(’input_date’).daterangepicker( );

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?

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

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

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

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

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

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

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.

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

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

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

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

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

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

Humm… interesting,

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

Anyway, thanks for the post

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

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

When the button is clicked I do:

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

Any suggestions would be greatly appreciated.

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.

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

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

thanks

Kudos to a slick date picker.  You guys were really thinking outside the box.  Would be nice to have an option for just date range and 2 separate text boxes.  Will have to play with that a while.
Did notice the date range allows you to pick an end date prior to the start date.  Aug 3, 2009 to Aug 1, 2009

doesnt work in opera.. :(

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?

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

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

Thanks for any tips!

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?

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

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?

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

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.

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

Keep up the good work!!!

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.

Great work!..

...but…

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

how fix it?

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

Can someone give me a code snippet to change
the language of the days. I know hot todo it with
the datepicker, but doesn’t work in this daterangepicker.

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?

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”

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

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

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

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

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

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!

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

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

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.

Hi,

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

Thanks

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

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

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

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

Thanks for any ideas and suggestions.

Thanks for this great plugin!

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

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

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

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?

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

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…

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

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

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

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

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

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

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

At line 200 add this:

Nice work .. Keep rocking ..

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.

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.

The Datejs doesn’t return the right value for “next friday +”, which works on the
Datejs home page test,

“today +” works

I’m using 2 inputs

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

],

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

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

Is this compatible with jQuery 1.4?

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?

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

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.

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

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.

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

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?

For Multiple instances use these following code:

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

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

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

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

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

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

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

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

Hi

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

and remove the left side (just show calender)

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

How do you make the default open set to “Date range”
I tried the code you provided above to no avail. Please help. I am a newbie.

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

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

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

I’ve been having a few issues with the date range picker, namely with limiting dates and pre-date selection.
I’ve found the code which will do both individually, but not together.

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

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

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

It would also be good if the above limitations could affect the other picker.
For example the date end cannot be before the date start and vice versa.

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.

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.

blorriman,
You can do it but you’ll have to update the plugin, in the function “jQuery.fn.clickActions” add the lines (before the if statement);

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

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

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

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

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.

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

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

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

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

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

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!

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.

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?

If any problems in using it with ASP.NET validations then you may get length is null or not an object. Here is the complete solution for it.
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html

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.

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.

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’

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

Very nice control!
but I notice a scrollbar popping up on the right
... although only for a split second - is this something that can be fixed easily?
otherwise really impressive!
thanks

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

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

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

How do I remove/disable some of the presets?

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

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

It doesn’t do anything.  I looked with FB and found a hidden div at the end of the <body> with an id of “ui-daterangepickercontain”.  So, I believe the datepicker code is being called on the right element.  However, when I click in the text input box, nothing happens.  FB doesn’t report any code errors, missing functions, etc.  Just doesn’t do anything.  I’m loading jquery 1.42, ui.core, ui.widget, and the 1.8 datepicker (so, not the entire jquery-ui file).  I’m calling with the line of code $("#daterng").val("I’m here").daterangepicker();
The val tells me I’m adding it to the right text box (it didn’t work before I added the val()).  fyi--this text box is in a hidden div initially.  Would that cause a problem?

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

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

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

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

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

Thank you anyways

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

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

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

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 ?

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

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)

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

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

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

Is there anyway in the range picker to highlight the startdate to the enddate? and also to fly the menu out to the left instead of the right?
Thanks awesome plugin.

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.

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.

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

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

Hi, I would like the date range picker to popup on the left of the field. Is there any way to to this?
Several people asked already but no answer or help has been given to achieve this…

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

Can’t seem to figure out why.  Any ideas?

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

Hi
I am creating asp site.
I am getting error, Object not supported on
$(function(){ $(’input’).daterangepicker({arrows:true});
});

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

I got the sample code to do exactly what I want, but when I point it at a specific control ID I get
“Microsoft JScript runtime error: ‘val()’ is null or not an object”

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

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.

Seems my first comment was rejected.
Once more in shortform:

Thanks for the plugin! Really nice one.

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

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

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

Greetings

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!

Hi All, I have a panel that I hide when I finish with it and then load a different panel (it’s kind of a wizard).
This panel has a daterangepicker defined on it like so:
jQuery_1_3_2(document).bind(’RULE_SHOWN’, function(){
jQuery_1_3_2("input#userJoinDateField").daterangepicker({
earliestDate: Date.parse(’1/1/2009’),
presetRanges: [
{text: ‘Today’, dateStart: ‘today’, dateEnd: ‘today’ },
{text: ‘30 days ago’, dateStart: ‘today-30’, dateEnd: ‘today-30’ },
{text: ‘30 days from now’, dateStart: ‘today+30’, dateEnd: ‘today+30’ }
],
presets: {
specificDate: ‘Select Date’
}
});
}
);

My problem is that when the panel is no longer shown, I get into an infinite loop of that throws errors like this:
rangeInput.val() is undefined
over and over again…
Do you guys maybe have some idea as to why this happens and how I can fix it? (perhaps by unloading the daterangepicker from the element somehow before it’s hidden?)
Thanks,
Elad.

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.

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

daterangepicker do not respect custom dateFormat, when you change order of month/day/year.
If you set dateFormat: dd.mm.yy eg. Middle/Eastern Europe, the restoration date from input to datapicker is still formated as mm.dd.yy. Change the lines by the line 110 to sth like this:

var iA = ‘today’;
var iB = ‘today’;
if (rangeInput.val().split(options.rangeSplitter).length > 0) {
var iA = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[0].trim());
}
if (rangeInput.val().split(options.rangeSplitter).length == 2) {
var iB = jQuery.datepicker.parseDate(options.dateFormat, rangeInput.val().split(options.rangeSplitter)[1].trim());
}

inputDateAtemp = iA;
inputDateBtemp = iB;

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

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

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.

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

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.

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

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.

Hi guys,

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

plz help .....

NiksKniz say: Idea shaking, I support.

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

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

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.

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

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.

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.

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.

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

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>

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?

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>

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

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

http://pastebin.com/XrmL3kis

Thanks.

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

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

it would be great to have it on github!

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.

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?

Thank you for this tool!

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

Cheers.

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.

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

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.

@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

Excellent! Now it’s working like a charm. Thank you for your help!

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.

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

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?

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

Hey guys just wanted to let you know an easy way to make the Instance management work with more than one date range widget on a screen. All you need to do is wrap your inputs with a span class:
<span class="date_range_wrapper">
<input name="date1" class="date_range">
<input name="date2" class="date_range">
</span>

then modify the onClick event in the pluggin

jQuery(this).click(function(){
//calls parent so we can have more than one picker on the screen
rangeInput = jQuery(this).parent().find("input"); //calls wrapped inputs
toggleRP();
return false;
});

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

I might sugges you change the event type from click to jQuery(this).bind("click focus”,function(){… to make visible

Hello,
I’m currently using your plugin and I have some troubles with one particular issue. Try to do that:

- Go to your working demo end click on the input field
- Select a date (9/15/2010) with specific datepicker
- Click on the input field and change manually the date (with your keyboard without using the datepicker) to 9/9/2010
- Click outside to close the widget
- Reclick on the input field and go to the specific datepicker

At that point I expect to see the manually entered date to be selected on the datepicker widget. What do you think? And how to do that on your extension?

Please note that this functionality is implemented in the original UI.datepicker ;)

Thanks

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?

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

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="” />

I found out that once I changed the value of date field like this:

var datum = some calculated value;
$("#datuman").val(datum);

The datepicker wont highlight start and end date nor the arrows for previous and next work. Also, it doesn’t highlght start and end date even if You set the date on input field through HTML:

<input type="text" name="datuman" id="datuman" class="datum" readonly="readonly" value="01-Aug-2010 to 31-Aug-2010” />

It also doesn’t work when You pick one of the presets. For example You pick previous month, it populates input field correctly, but when You click on input field again, start and end date aren’t highlighted.

That problem bugged me for more then 10 hours and I finally solved it.
First of all I added a change trigger after setting the value fo input field dynamically like this:

$("#datuman").val(datum).trigger("change");

My daterangepicker initialization (I have more optmized version of this, fewer lines, but I intentionally write it like this for better understanding):

$(’#datuman’).daterangepicker({
arrows:true,
dateFormat: ‘d-M-yy’,
rangeSplitter: ‘to’,
datepickerOptions: {changeMonth: true, changeYear: true},
onChange: function() {
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if (datumopseg[1] == “")
{
datumopseg[1] = new Date();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
},
onOpen: function(){
var datum = $(’#datuman’).val();
var datumopseg = new Array();
datumopseg = datum.split(’ to ‘);
if (datum == “")
{
datumopseg[0] = new Date();
}
if (datumopseg[1] == “")
{
datumopseg[1] = new Date();
}
$(”.range-start").datepicker("setDate",Date.parse(datumopseg[0]));
$(”.range-end").datepicker("setDate",Date.parse(datumopseg[1]));
}
});

Now, everything is working as I wanted, start and end date are always highlighted with the proper values from input field.

Regards

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

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)

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.

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!

Can anyone tell me how to integrate time to this such a cool plug-in?

Great plugin!
One problem: is works great for one date range, but when I put 2 date ranges ( 2 fuctions), I get “Error: ‘offset().left’ is null or not an object”..
Can you help..?
Thanks!

Disregard that. I was using server textboxes…
It works great! thx.

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

*mark the input dates as selected (sorry)

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

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

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?

Hi,
I’d like to set a maxDate and minDate for dateRange preset.
I am trying to put values through datepickerOptions but it doesn’t work.
Does someone know how to do that ?

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

Is there a way to set the max date range dynamically?

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

Arrgh - using the datepicker on the second (originally hidden) tab of JQuery-UI-tabs - and the date picker won’t show up - I think it’s putting it on the first (now hidden) tab.
Is there a solution to this? (please!)

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

Very good if the next version support :
- French translation or Change Days / Months in other language

In the calender, there are year dropdownlist shown but i found out the latest year shown goes until 2025.
What should I do if i want to change the year shown in the year dropdownlist?
For example, the range is between 1900 to 2010 only.

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

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

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?

Doesn’t work in Opera 10 with jQuery 1.4.4 :(
This is the latest to date.

I really like your plugin, but was wondering about non-sequential date picking.  Any ideas where to start to implement something like this?

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

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?

http://datepicker.org.ru/

Hi all.
Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).

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

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?

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

i made a little hack to fix it by changing the plugin js file

function showRP() {
if (rp.data(’state’) == ‘closed’) {
rp.data(’state’, ‘open’);
rp.find(”.ui-datepicker").css("display", “inline-block"); //Changed by Daniel
rp.fadeIn(300);
options.onOpen();
}
}
function hideRP() {
if (rp.data(’state’) == ‘open’) {
rp.data(’state’, ‘closed’);
rp.find(”.ui-datepicker").css("display", “none"); //Changed by Daniel
rp.fadeOut(300);
options.onClose();
}
}

hope thats help

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

Sexy. This made my evening, Thank You!

Thanks a bunch Daniel Jaffe, you saved my butt on this one!

2 events are sent on change.
But first raised event cannot see second value, so there is 2 onchange calls and first uses wrong (previous one indeed) end date.
I fix by separate set values and THEN raise events.
Then i think first event could be ignored to get only one call !

//Set values first, then raise events
var ds = rp.find(’.range-start’).datepicker(’setDate’, dateStart).find(’.ui-datepicker-current-day’);
var de = rp.find(’.range-end’).datepicker(’setDate’, dateEnd).find(’.ui-datepicker-current-day’);
//ds.trigger(’click’);//de.click enough
de.trigger(’click’);

Hi,
It would be nice if it’s possible that the result of date selection ‘Today’, actually shows ‘Today’ in the text field. Then users can store the url and always see the stats of today (?date=today). Now the browser will remember the actual date you have picked.

Has anyone attempted to incorporate the time add-on from the Trent Richardson, http://trentrichardson.com/2010/04/19/timepicker-addon-for-jquery-ui-datepicker/, with this daterange picker?

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.

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

How to make the date picker align to the bottom right of your element instead of bottom left, assuming your date picker was initialized with an element called “input#date”:
**************
var dc=$("input#date").daterangepicker(/*your opts here*/);
var right=($(window).width()-dc.offset().left-dc.width());//calc distance from right side of screen
dc.daterangepicker();
$(".ui-daterangepickercontain").css( {’left’:’auto’,’right’:right+’px’} );
**************

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.

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.

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

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.

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.

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

Hi
i would like to have only the Date Range option by default
so what I mean to say is when I click on the text box and date-picker menu pops up I should see only Date Range option by default and not the other options.

Hi,
I am using 1.4.2 version of JQuery Theme roller, which has simple datepicker. How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page.

Thanks,
Vikrant

@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

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!

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

Hi Mohan Ram
Simply You have to use onClose function… because I also faced this problem ;)

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

@Etienne Thanks dude..  Was banging my head on the keyboard for awhile on that one!

How can I bring your styled datepicker in my existing application by not messing up other JQuery elements in my page same qustion

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.

prev and next event not work onchange event

It worked for me ,thanks :)

is this still working

Thaks for the post

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!

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!

Hi, check out our jQuery Event Calendar: http://www.dcs-solution.com/blog/?p=22#more-22

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

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.

Hi,

This date range picker is extremely good.

But after integration with my jqgird and jqgrid smart search panel code, the picker is getting loaded in the end of the page.

Any help is appreciated.

Thanks in advance.

Regards,
Selvi

I tested it with jquery-ui-1.7.2.custom.min.js, but don’t work. Anyone?

I’m having display issues in IE and FF with JQuery UI 1.8.5. Anyone else? It won’t show the actual date in the text box. Works fine in Chrome and Safari.

DCS Solution, my question was meant for Filament Group, not for Nobody Inc with no product. Please refrain from answering my questions (or piggy-backing on someone else’s website for your own promotion).

Thank for this Matthew Scott:

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

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

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

I doubt anyone has a solution however.

I found a solution for using an image to open the daterangepicker.
1.  Add an img tag with an id and its src
source.png
2.  Add an event to your image
$( “#id").click( function() {
$( “.ui-daterangepicker” ).show();
});
3.  In daterangepicker.jQuery.js add an option and use it to toggle the datepicker.
var options = jQuery.extend({ buttonForDatePicker: null }, settings);

if( options.buttonForDatePicker != null )
{
jQuery( options.buttonForDatePicker ).click( function() {
toggleRP();
return false;
});
}
4.  When initializing the daterangepicker set the element to be used.
$( “#datepick” ).daterangepicker( {
buttonForDatePicker: $("#calendarId")
});
5.  If you don’t want to the daterangepicker to display when clicking on the textbox, remove the toggle in daterangepicker.jQuery.js around line 283.
//inputs toggle rangepicker visibility
jQuery(this).click(function(){
---->>>>//toggleRP();
return false;
});

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

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

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

Cheers on a great plugin!

Really nice plugin, thanks, but a couple of issues I found:

For anyone requiring English(UK) dateFormat (i.e. dd/mm/yy), you will find issues after specifiying this unless you also alter the culture info defined for the Date.js code.  I found before altering this that when opening the calendar after previously selecting a date, the date would be assumed to be in US format, hence the calendar would open on the incorrect month.

I’ve yet to resolve this issue…
I’m using 2 inputs for start and end dates.  If you already have dates entered in your two inputs, whether selected using the RP or typed in, unless you previously selected the date from either calendar, upon opening one/both calendars the currently selected/entered date is not highlighted (with ui-state-active)?

Other issue I think is inherent with the jQuery datePicker, but still annoys me…
When your currently selected date is highlighted, when moving to another month, the same day/date of the month will be highlighted for every month.  Doesn’t really cause any issues, but just seems wrong to me.

If anyone has any ideas on either of the above, I’d appreciate any suggestions.

Hi,

I’ve read through these these comments, I am trying to have it so that when I click my text box the date range selector is automatically displayed. i.e. the suer doesn’t have to select it.

I have tried the solution that David Rodriguez was given and I am having no luck.

Can anyone please help me? 

Thanks all.

I have solved the above problem, for all those who want to have the daterangepicker display when the text box is called all you need is this:

$(’input.date’).daterangepicker( { closeOnSelect: true, onOpen: function(){
$("li.ui-daterangepicker-dateRange").trigger("click"); }});

The important thing to note are the double quotation marks:

GOOD - $("li.ui-daterangepicker-dateRange").trigger("click");
BAD - $(’li.ui-daterangepicker-dateRange’).trigger(’click’);

The Bad version does not work!

I hope that helps people.

@jc - the code you posted for using an image to launch the datepicker worked beautifully! Thank you for posting :)

It would be useful if you’d link here to your github repository for this plugin (as @tom requested): https://github.com/filamentgroup/jQuery-UI-Date-Range-Picker

I really need to have the datepickers expand left instead of right. Isn’t it possible?

Has there been any progress with brad’s suggestion in the

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

?

Hi,

Has there been any progress on preventing the script from having start date that exceeds the end date?  This functionality would be very useful for me.

This only works with legacy Jquery UI css (1.71 or 1.73), correct?

If I try with the most receny jquery ui (1.83) it doesn’t work. Calendar doesn’t show up. Is there any update for the most recent jquery ui css for this great date picker?

I’ve been using this kind of plug in of one of my website. For this post, I just take a review before updating into a latest version of jQuery.

It’s looking very nice. but here i have a doubt, if i want to use same thing multiple times in a single page , how can i use it?

Thanks

I wrapped the input field in a div and floated the div to the right side of my page. The datepicker now appears below the last menu item of “Date Range”. How can I get this to open to the left of the drop down menu?

Thanks

The latest version of daterange picker doesn’t work with jquery1.6.1 and jquery-ui 1.8.12. Tested on IE, on FF and Chrome it’s fine.
my links:
jquery-ui-1.8.12.custom.css,
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js,
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js

Previous message: sorry only on FF it’s working.

Fix: Add to jquery-ui-1.8.12.custom.css [513]: .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
Add to ui.daterangepicker.css at EOF: .hasDatepicker DIV { display:block; }

Date picker for selecting two date intervals at the same time (e.g. a date interval with “Outward flight dates” and one date interval with “Return flight dates")

I would like to be able to select two date intervals from one single “date picker popup”, e.g. a date interval of “Outward flight dates” and one date interval of “Return flight dates”.

Consider the date range feature in the demo for the following date range picker:
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

It displays two calendars to become selected into one interval, a start date and an end date.

Similarly, I would like to find a date picker with two calendars, one with “Outward flight date” and one with “Return flight date”.
However, instead of simply being able to choose one date for each (as in the start date and end date example at the filamentgroup site) I would like to be able to select a range of dates for each calendar.
Clicking multiple dates within one calendar can be done with the following date picker:
http://multidatespickr.sourceforge.net/

For example, if I as a end user am flexible regarding the dates, I might want an outward flight at some of the first days of august (e.g. 1-5 by clicking these five dates or even better only having to click 1 and 5, in the “left” calendar with outward flight dates) and then I might want a return flight some of the last days of august (e.g. 25-31 by clicking these seven dates or even better only having to click 25 and 31, in the “right” calendar with return flight dates).

The selected dates should then be retrievable into an array of dates, to make it possible to create two date intervals like this:
8/1/2011 - 8/5/2011 (the interval for outward flight date)
8/25/2011 - 8/31/2011 (the interval for return flight date)

Does anyone know of a date picker that supports this kind of feature ?