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

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

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!