Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework
Posted by Scott on 01/05/2009
We’ve updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a previous version we wrote for jQuery UI 1.5.3.
Working Demo:
The demo above was generated with the following code:
HTML
<input type="text" />
jQuery:
$('input').daterangepicker();
An additional demo with arrows and a custom dateFormat:
Features and Updates
- Uses jQuery UI 1.7.1: The range picker now uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.
Date.js Integration: We’ve integrated the fantastic date.js library to allow for easy preset development.
- Optional Range Advancing Arrows: Optional forward and back arrows allow a user to jump forward and backward by range duration.
jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.
Download (and help us improve) the code
The date range picker plugin code is open source and available in a git repository, jQuery-UI-Date-Range-Picker. If you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.
Developer Options
The following options are available in this plugin:
-
presetRanges: Array of objects to be made into menu range presets. Each object requires 3 properties:
- text: string, text for menu item
- dateStart: date.js string, or function which returns a date object, start of date range
- dateEnd: date.js string, or function which returns a date object, end of date range
-
presets: Object, datepicker toggle links. Available options are: ‘specificDate’, ‘allDatesBefore’, ‘allDatesAfter’, ‘dateRange’. Each can be passed a string for link and label text. (example: presets: {specificDate: ‘Pick a date’} ).
-
rangeStartTitle: string, text for label above start calendar in a range.
-
rangeEndTitle: string, text for label above end calendar in a range.
-
doneButtonText: string, text for the done/close button.
-
prevLinkText: string, text for the previous arrow (used in title attr of links as well).
-
nextLinkText: string, text for the next arrow (used in title attr of links as well).
-
earliestDate: Date.js string, earliest date allowed in system
-
latestDate: Date.js string, latest date allowed in system
-
rangeSplitter: String, character between two dates in a range.
-
dateFormat String, date formatting, see available values
-
closeOnSelect: Boolean, true will close the rangepicker when a full range is selected.
-
arrows: Boolean, true will add date range advancing arrows to input.
-
posX: int or string, left absolute position of rangepicker. Defaults to bottom left of input.
-
posY: int or string, top absolute position of rangepicker. Defaults to bottom left of input.
-
appendTo: jQuery selector or element, element to append range picker to.
-
onOpen: function, callback that executes the moment the range picker starts to open.
-
onClose: function, callback that executes when the datepicker closes.
-
onChange: function, callback that executes whenever the date input changes (can happen twice on range selections).
-
datepickerOptions: Object, accepts all jQuery UI Datepicker options. See UI datepicker options.
Development Notes
This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. We’ve tested it in Firefox 2/3, Safari 3, and IE6/7.
Dependencies
This plugin requires jQuery and jQuery UI Datepicker. It also uses the jQuery UI CSS Framework as well as one additional custom CSS file. The demo in the zip file includes all necessary dependencies.
Setting Menu Presets
Setting preset ranges is now very easy and powerful with the help of date.js. To add a preset, simply pass an array to the presetRanges option like this:
$('input').daterangepicker( {
presetRanges: [
{text: 'My Range', dateStart: '03/07/08', dateEnd: 'Today' }
]
} );
Note that the dateStart and dateEnd properties can accept strings (as shown), or functions which return a date object. The string will be parsed by date.js to generate a date (visit Date.js for a list of values). For more custom dates, you can write a function that returns a date object. Keep in mind that you can use Date.js within that function for any helpers you might need.
About Date.js
Date.js is an open source date parsing library written by Coolite. Essentially, you can pass some text into it and get a date in return. For example, it would parse the words “next week” and return a date object for a day 7 days from today - VERY slick! The library does a heck of a lot more than that too, and we strongly advise checking it out at Datejs.com to find out more.
Multiple Inputs
If you’d like to use this plugin with 2 inputs for the start and end dates, simply call the plugin on two inputs instead of one. The plugin will update them in order of appearance.
Driven by Input Value
The datepickers will be generated based on any values that are in the inputs at page load. For single inputs, it will split the input value by the rangeSplitter character (default: ‘-’). Each value is parsed by date.js, so you could even begin with a range like “today - next week” in the input, and the datepickers will be set accordingly.
Still to do…
- Collision detection: At the moment, the rangepicker simply gets placed on the page by coordinates. There’s no collision detection yet.
- Instance management: Currently, 2 rangepickers on one page won’t play well together. We’ll look to improve this soon.
Comments
Luka Kladaric on 01/05 at 06:54 PM
Scott (Filament) on 01/05 at 07:08 PM
Ignacio Vivona on 01/05 at 07:35 PM
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!
Luka Kladaric on 01/05 at 09:41 PM
Adam Fortuna on 01/06 at 08:00 AM
Dude on 01/06 at 10:07 AM
Atilla on 01/06 at 10:10 AM
Dude on 01/06 at 10:10 AM
Scott (Filament) on 01/06 at 10:14 AM
Volomike on 01/06 at 10:23 AM
Todd (Filament) on 01/06 at 10:27 AM
Todd (Filament) on 01/06 at 10:35 AM
Scott (Filament) on 01/06 at 10:41 AM
In order to fix this issue, we decided to introduce 2 new useful options to the plugin: onOpen and onClose.
Both options accept callback functions that will execute when the daterangepicker plugin opens or closes. I’ll document them in the article as well.
Viewing this update will require a good cache refresh for returning users, just FYI. And if you continue to have trouble viewing the demos, you can always click the link under them to view them in a new window.
Thanks!
Scott (Filament) on 01/06 at 12:42 PM
Nice work guys!
Wynn Netherland on 01/06 at 03:48 PM
- 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.
Volomike on 01/06 at 03:55 PM
Scott (Filament) on 01/06 at 04:58 PM
- Click off the control closes the popdown menu.
FG: View the demos outside of the iframe, this should be true.
- Ensure our disabled friends can access all the functions without a mouse, if you can.
FG: Good point. That might need to wait for jQuery UI’s datepicker’s upcoming refactor.
- Disable the “Next” and “Back” buttons on the control (where applicable) when it still says “Choose a Date”.
FG: Ahh good idea. We’ll add the jQuery UI CSS Framework’s “ui-state-disabled” class to them whenever a range is not selected. This will make them appear disabled through an opacity shift.
- Keep making it easy, such as applying a bunch of extremely common defaults if certain properties are not completed.
FG: Not sure what you mean by this.
- If focus is on yet another date control, deselect the previous one.
FG: Good idea, though we still need to resolve an issue with multiple rangepicker instances anyway. This component will be refactored and ported to an upcoming version of jQuery UI and proper support for multiple instances may need to wait until that time.
Scott (Filament) on 01/06 at 05:14 PM
You can see the idea http://www.dhtmlgoodies.com/scripts/js_calendar/js_calendar.html
seshu on 01/07 at 02:43 AM
Teo on 01/07 at 12:14 PM
Thanks
David Rodriguez on 01/08 at 09:50 AM
@David: I don’t understand your question. Can you clarify?
Scott (Filament) on 01/08 at 10:11 AM
David Rodriguez on 01/08 at 03:11 PM
David Rodriguez on 01/09 at 03:23 PM
$(’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.
Maggie (Filament) on 01/09 at 04:11 PM
David Rodriguez on 01/09 at 11:24 PM
carlos on 01/13 at 04:07 AM
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
bear on 01/14 at 11:42 AM
Scott (Filament) on 01/14 at 06:00 PM
firefly on 01/15 at 12:12 PM
Scott (Filament) on 01/15 at 02:46 PM
code:
<form action="xxx.php" method=post>
<input type="text" value="Click to pick a date” id="rangeA"/>
<inpur type="submit" value="submit">
</form>
Justin on 01/15 at 04:17 PM
$(’#rangeA’).daterangepicker();
If you have it scoped to all input elements, it’s very likely to cause problems in a real form.
Scott (Filament) on 01/15 at 04:32 PM
FF3 OS X
Tim Yates on 01/16 at 05:58 PM
But in IE8 with even compatibility mode gives bugs…
Btw really awesome contribution wow!
James on 01/16 at 10:03 PM
Kepe it up!
Brad Fimore on 01/16 at 10:19 PM
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)
Lesein Jean-Paul on 01/18 at 05:40 PM
Lesein Jean-Paul on 01/18 at 07:39 PM
@James: Interesting. We will test.
@Brad Fimore: Good point. We’ll think of a good way to deal with that but it may need to wait until this component is refactored and included in jQuery UI (projected for jQuery UI 1.7). At that point, we also aim to include range highlighting across calendars and other features such as instance management. Feel free to check out the planning wiki http://jqueryui.pbwiki.com and join in the conversation.
@Lesein Jean-Paul: We’ve added options for each menu preset to have custom text as you’ve requested, as well as new options for nextLinkText, prevLinkText, and doneButtonText. Using these in combination with whatever language settings you’d like to pass into the datepickeroptions hash, you should be able to achieve a full translation. See the options listed above and let us know how this works out for you.
As for the two problems you mentioned, what values are you seeing? I see “1/1/2009 - 1/19/2009” for both, which is correct. These are based on your computer’s date settings, so check to make sure those are correct as well.
Scott (Filament) on 01/19 at 12:30 PM
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
justin on 01/20 at 04:32 PM
Scott (Filament) on 01/20 at 04:36 PM
$(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…
justin on 01/20 at 04:49 PM
$(’#range1, #range2’)
Scott (Filament) on 01/20 at 05:26 PM
So I can have the start date > stop date.
I think this is happening on date range
Gafitescu Daniel on 01/21 at 03:51 AM
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 !
Peepingtom on 01/21 at 11:48 AM
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?
NTulip on 01/21 at 04:43 PM
NTulip on 01/21 at 04:44 PM
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
quim on 01/24 at 03:48 PM
Some Google Analytic style selectors for the week, and the month would be nice as well.
Goran Juric on 01/25 at 08:48 PM
$(’.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();
});
baael on 01/28 at 02:17 AM
quim on 02/01 at 02:09 PM
Chris Barr on 02/04 at 06:46 PM
chris catton on 02/05 at 07:56 AM
$(’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
chris catton on 02/05 at 09:12 AM
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
frank on 02/05 at 10:44 AM
Scott (Filament) on 02/05 at 11:23 AM
$(document).ready(function(){
$("#rangeA").daterangepicker();
});
Scott (Filament) on 02/05 at 11:25 AM
If you’re trying to get this to work with 1.3 asap, try upgrading both jQuery and jQuery UI.
Scott (Filament) on 02/05 at 11:28 AM
$(’input’).daterangepicker({
presets: {
specificDate: ‘Just one date...’,
allDatesBefore: ‘Any date before...’,
allDatesAfter: ‘Any date after...’,
dateRange: ‘Custom range...’
}
});
The top portion of the menu is more freeform and is addressed through a different option called presetRanges. View the source of the plugin to see how those are handled. I left a few examples commented out.
Scott (Filament) on 02/05 at 11:36 AM
Scott (Filament) on 02/05 at 11:37 AM
Scott (Filament) on 02/05 at 11:45 AM
Scott (Filament) on 02/05 at 11:47 AM
Scott (Filament) on 02/05 at 11:48 AM
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?
frank on 02/05 at 11:48 AM
chris catton on 02/05 at 11:50 AM
If you are having any issues with jQuery compatibility, just make sure you have the matching versions of jQuery and UI.
Scott (Filament) on 02/06 at 11:23 AM
Thanks!
Scott (Filament) on 02/06 at 11:35 AM
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?
chris catton on 02/06 at 11:54 AM
It’s just a syntax error, possibly caused by our recent change in the value type of the presets option. In order to accommodate internationalization, the presets option is now a hash. Try this:
$(’input’).daterangepicker({presetRanges: [], presets: {specificDate: “Specific Date”, dateRange: “Date Range"}});
Scott (Filament) on 02/06 at 12:53 PM
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
frank on 02/09 at 04:51 AM
The example is
appendTo: ‘body’,
but i need put them in the input.
I write appendTo: $’input’, but not found
dipone on 02/09 at 11:57 AM
This is just a note of thanks for the excellent work. This control sorted most of my problems
Thnaks
himali (Sri Lanka) on 02/10 at 09:37 AM
$(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.
Rob on 02/10 at 10:29 AM
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.
Rob on 02/10 at 10:31 AM
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.
David Rodriguez on 02/12 at 03:41 PM
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?
chris catton on 02/12 at 06:45 PM
On your two points:
I’m not sure the clickActions function needs to show the picker, since the only time the function is used is when clicking a menu preset, meaning the picker is already visible. Am I missing your point?
In the portion where we set var rangeInput = $(this), ‘$(this)’ refers to the selector that the plugin was called upon, not the page. If I’m misunderstanding what you mean, can you clarify?
Thanks :)
Scott (Filament) on 02/16 at 02:26 PM
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 ....)
chris catton on 02/16 at 03:43 PM
C
chris catton on 02/16 at 03:44 PM
Translation is complete now.
Quim on 02/17 at 09:05 AM
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
Bob on 02/17 at 09:56 AM
@ Quim: Good to hear. If you have time, it would be helpful to post your daterangepicker options here for others who are trying to translate the presets. Thanks!
@Bob: Yes. It’s because your theme is using EMs for font-size units and it is written assuming 1em=10px. You have a couple options:
A. Set your body element’s font size to 62.5%. This will override your browser’s default font size of 16px and make 1em = 10px.
B. Go to ThemeRoller.com and change your font size to a pixel unit. This will fix the issue too but it will prevent the datepicker from resizing when a user increases their font size in IE.
If your UI can support ems, we’d recommend option A.
In the future, please post UI-related questions in google groups http://groups.google.com/group/jquery-ui. You’ll get help much quicker there.
Scott (Filament) on 02/17 at 06:31 PM
That did it! Thanks for your help
Regards
Bob
Bob on 02/18 at 09:56 AM
regina on 02/18 at 06:36 PM
$(’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.
regina on 02/20 at 03:45 PM
Holiday Rentals Advanced Search on 02/22 at 05:59 PM
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
asaf on 02/23 at 01:11 PM
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,
Souhail Jabbour on 02/25 at 01:22 AM
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.
nerkles on 02/27 at 03:01 PM
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
Azadi Saryev on 03/06 at 12:23 PM
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
redsquare on 03/09 at 09:11 AM
redsquare on 03/09 at 09:18 AM
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.
Kevin on 03/11 at 01:59 PM
Mckensy on 03/13 at 05:55 AM
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
riegersn on 03/14 at 11:37 PM
riegersn on 03/14 at 11:58 PM
I checked that datejs is MIT.
Is this MIT?
barry on 03/16 at 02:15 PM
earliestDate: Date.parse(’1/1/2008’)
Works like a champ! Thanks!
nklineg on 03/19 at 01:34 PM
altField: '#day', altFormat: 'dd',
altField: '#month', altFormat: 'mm',
altField: '#year', altFormat: 'yyyy'
This doesn’t work. How do I do this?
ad on 03/19 at 02:44 PM
@ nerkles: Once this control is rolled into jQuery UI, it will run on the UI widget API which will allow for updating options after init. We probably won’t be able to get to that until then, but we welcome code patches!
@Holiday Rentals Advanced Search: Nice site! Glad to see it in action.
@ Azadi Saryev: Thanks. Updated.
@ redsquare: I’ve got the jQuery team looking at this since it seems to be due to the new selector element ordering in jQuery 1.3.2. We’ve posted a page to illustrate the error as well, here: http://filamentgroup.com/examples/daterangepicker_v2/index_132.html
Does anyone have any ideas why this error is occurring in Safari?
@kevin: Did you try the datepickerOptions option? You should be able to pass native datepicker options into there.
@ Mckensy: We made sure to use “jQuery” instead of $ to prevent such collisions but it appears the date.js library uses $, which is probably causing your conflict. Maybe you could try replacing their $ variables with something else.
@Souhail Jabbour, @asaf, @riegersn: Did you see @nklineg’s comment? Let me know if that works. Also, maybe passing them into the datepickerOptions option will do what you’re trying to do.
@barry: The license is in the JS file. It’s dual: MIT and GPL.
@ad: If you’re trying to use a native datepicker option, pass it into the datepickerOptions option.
Scott (Filament) on 03/23 at 02:49 PM
Mike McNally on 03/24 at 03:00 PM
Scott (Filament) on 03/24 at 03:12 PM
This is a really cool piece of software and I hope it keeps getting cooler.
Mike McNally on 03/25 at 11:01 AM
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;
}
Fernando Fernández on 03/26 at 04:09 AM
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. :)
AKX on 03/26 at 09:43 AM
<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.
Javier on 03/26 at 05:28 PM
admin on 03/27 at 09:28 AM
Scott (Filament) on 03/27 at 09:38 AM
K@R!M on 03/28 at 02:38 PM
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
Hokagenz on 03/29 at 09:29 PM
Throws an error when I try to select the End Date first in a date range.
Thank you for a nice plugin.
John Emmanuel on 03/30 at 06:46 AM
Please fix it.
Thanks for the good calender plug in :)
Murali on 03/31 at 07:00 AM
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.
Veronica on 03/31 at 08:10 PM
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?
Nischal Shetty on 04/01 at 12:15 AM
Nischal Shetty on 04/01 at 12:36 AM
Jeremy on 04/05 at 12:59 AM
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.
Jeremy on 04/05 at 01:49 PM
Jeremy on 04/05 at 02:00 PM
Great news! Thanks to @Jeremy, above, the date range picker widget now supports multiple instances on a page. Thanks Jeremy - great job figuring that one out.
I’ll also point out that while making the changes noted by Jeremy, I noticed there are a few points in this script where plugins are being rewritten to the $ variable and could be moved outside of the plugin for a performance gain. We’ll try and make that change soon, but if not, it will certainly be fixed when this plugin is rewritten for inclusion in the UI library. If anyone has time to chip in a revision with this fix, we’d love your help :)
Also, this latest uploaded version includes auto-detection for positioning in relation to the input. The logic for the positioning options looks like this:
posX: rangeInput.offset().left,
posY: rangeInput.offset().top + rangeInput.outerHeight(),
Let us know how this logic works with your code so we know if there are any issues. As always, you can override these options by passing your own values into the options argument.
I’d recommend grabbing the latest copy of this script if you are in need of auto-positioning or multiple range pickers on a page.
Let us know how it’s working for you. Thanks!
Scott (Filament) on 04/06 at 01:07 PM
Bec on 04/07 at 02:44 AM
Replace lines 172-178 with:
function showRP(){
rp.show();
options.onOpen();
}
function hideRP(){
rp.hide(0,function(){ options.onClose(); });
}
Scott (Filament) on 04/07 at 09:15 AM
http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/b74812ee21df8ad7
Scott (Filament) on 04/08 at 11:23 AM
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.
Peter Bengtsson on 04/09 at 09:28 AM
http://crosstips.org/statistics/graph/
Peter Bengtsson on 04/09 at 09:33 AM
Scott (Filament) on 04/09 at 09:41 AM
Peter Bengtsson on 04/09 at 09:59 AM
Thanks for the great plug in.
Kris Gosser on 04/09 at 01:32 PM
Try passing this among your preset ranges:
{text: ‘The previous month’, dateStart: ‘1 month ago’, dateEnd: ‘Today’ }
You can test expressions for other date.js string conversions on their site: http://www.datejs.com/
Scott (Filament) on 04/09 at 01:53 PM
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”.
Kris Gosser on 04/09 at 01:59 PM
{text: ‘The previous Month’, dateStart: function(){ return Date.parse(’1 month ago’).moveToFirstDayOfMonth(); }, dateEnd: function(){ return Date.parse(’1 month ago’).moveToLastDayOfMonth(); } }
Scott (Filament) on 04/09 at 02:18 PM
Scott (Filament) on 04/09 at 02:22 PM
Noted on the passing of functions too.
Kris Gosser on 04/09 at 02:33 PM
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
João Gala on 04/15 at 10:16 AM
Scott (Filament) on 04/15 at 10:34 AM
“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.
Herr Kaiser on 04/15 at 11:46 AM
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
João Gala on 04/16 at 06:04 AM
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?
WadeO on 04/16 at 03:54 PM
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!
HT on 04/17 at 09:59 AM
@João: I didn’t see any datepickers in your demo page, but like I said, based on your list above, I think you need the “datepicker” plugin from jQuery UI. Our plugin depends on the jQuery UI datepicker. You can download it at http://jqueryui.com/download/ or it’s also in the zip linked on this page.
@WadeO: You may need to use the posX and posY options to get it to position where you need it.
@HT: I’m not sure on that one. As far as I know, the logic we included for dateFormat is the same that the datepicker widget itself uses. Can you confirm that this issue is not present in the regular jQuery UI datepicker?
Scott (Filament) on 04/17 at 03:15 PM
Justin on 04/17 at 10:49 PM
Any help would be greatly appreciated.
$(’#dates’).daterangepicker(
{
closeOnSelect: true,
posY: div_pos.top,
posX: div_pos.left + 830,
onClose: function(){
alert(’Change’);
}
}
);
Justin on 04/17 at 10:58 PM
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!!!
Aditya Sanghi on 04/18 at 05:43 AM
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?
Philip Pond on 04/20 at 07:18 PM
Tiffany on 04/22 at 10:18 AM
Tiffany on 04/22 at 10:23 AM
Excellent work though and Thanks in advance !
Pablitt on 04/22 at 03:54 PM
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?
Tiffany on 04/24 at 12:40 PM
Tiffany on 04/24 at 03:54 PM
datepicker default option firstDay not working ;(
Mastyf on 04/25 at 06:39 PM
I guess I’ll have to implement a counter.
Tor I. Pettersen on 04/26 at 09:43 PM
onClose: function(){
alert(submitted);
submitted++;
if (submitted == 2) {
$(’#events’).submit() //Or any other function you’d like to shoot off
}
},
Seems to work :-P
Tor I. Pettersen on 04/26 at 09:58 PM
Tiffany on 04/27 at 10:58 AM
Tiffany on 04/27 at 11:11 AM
I set the first day to Monday using
> dateStart: function(){return Date.parse(’today-7’).moveToDayOfWeek(1);}
Tiffany on 04/27 at 11:51 AM
Scott (Filament) on 04/27 at 11:55 AM
Tiffany on 04/27 at 12:05 PM
Scott (Filament) on 04/27 at 12:59 PM
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.
Tiffany on 04/27 at 02:59 PM
Scott (Filament) on 04/27 at 03:55 PM
Grab the latest zip for the updated file.
Thanks!
Scott (Filament) on 04/27 at 03:57 PM
Tor I. Pettersen on 04/27 at 04:13 PM
Scott (Filament) on 04/27 at 04:59 PM
Any other event I can use to detect that?
Thanks for a great plugin btw.
Tor I. Pettersen on 04/27 at 07:01 PM
Scott (Filament) on 04/28 at 11:24 AM
Really its worth reading it......Very nice.....
Thanks,
RathikaPoobalan
RathikaPoobalan on 05/05 at 08:50 AM
if(inputDateBtemp == null){inputDateBtemp = inputDateBtemp;}
is that code really useful?
Matt on 05/07 at 02:41 PM
Multi date selection highlights
shamun toha on 05/10 at 07:09 AM
Eric on 05/11 at 09:08 AM
@shamun toha: Thanks, we agree. That feature will likely be supported once this component is officially integrated into jQuery UI.
@Eric: Depending on the use case, you may be right. This layout works best for ranges that span long amounts of time, such as filtering analytics data, blog entries, etc. For small date ranges, a multi-select within a single datepicker might be more appropriate. We hope to support both of these scenarios when the official jQuery UI daterangepicker is developed so you can use whatever works best for your needs.
Scott (Filament) on 05/12 at 04:01 PM
Its a good idea to implement dispose method.
hazarin on 05/14 at 03:45 AM
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.
hazarin on 05/14 at 04:10 AM
Steve on 05/14 at 03:28 PM
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?
Mike on 05/14 at 10:50 PM
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
KAB on 05/15 at 07:15 AM
thanks
KAB on 05/15 at 07:58 AM
Steve on 05/15 at 11:40 AM
Line: 125
Char:4
‘this.text’ is null or not an object
It eventually crashed IE8 completely.
Scott on 05/15 at 02:26 PM
Should be better now. The zip is updated.
Scott (Filament) on 05/15 at 02:51 PM
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.
Scott Whigham on 05/15 at 03:13 PM
1) We’ve been considering something like that but for this case, this plugin will move into the jQuery UI project’s SVN shortly.
2) Any time the zip changes here, we add a comment. If you checked the box, you’ll stay up to date.
Thanks again.
Scott (Filament) on 05/15 at 03:17 PM
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’ }]
Mike on 05/15 at 04:09 PM
Scott (Filament) on 05/15 at 04:11 PM
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!
Scott Whigham on 05/15 at 04:26 PM
Mike on 05/15 at 09:51 PM
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!
Shadi Almosri on 05/18 at 05:19 PM
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)
Viðar on 05/20 at 02:44 AM
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.
David Herring on 05/20 at 09:02 PM
BTW - This is brilliant work.
thx dave
David Herring on 05/20 at 09:07 PM
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
David Herring on 05/20 at 09:30 PM
Neil on 05/22 at 12:09 PM
Any thoughts?
Joshua Lippiner on 05/23 at 02:24 PM
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,
Kemal on 05/25 at 02:48 AM
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
David Herring on 05/25 at 05:19 AM
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.
Yehuda on 05/25 at 09:20 AM
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 ...
Yehuda on 05/25 at 10:00 AM
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
Yehuda on 05/26 at 04:30 AM
alex on 05/27 at 06:54 PM
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 ?
alex on 05/27 at 07:47 PM
$(function() {
$(’input’).daterangepicker({
datepickerOptions: { onSelect: function() { alert(’OnSelect’); } },
onClose: function() { alert(’OnClose’); }
});
});
Results:
“OnSelect” ==> “OnClose” ==> “OnSelect”
Tony on 05/28 at 01:15 AM
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
jordan on 05/29 at 12:06 AM
Thanks for the great plugin :)
jordan on 05/29 at 12:11 AM
datepickerOptions:{changeMonth: true, changeYear:true} =)
alex on 05/29 at 11:37 AM
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
nobutaka on 05/31 at 10:00 AM
And I discovered (reading previous comments) how to hide ranged selections (but maybe you could document that).
Rodrigo on 06/02 at 07:04 AM
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).
Rodrigo on 06/02 at 02:19 PM
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 ?
alex on 06/02 at 04:08 PM
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.
timmfin on 06/05 at 02:26 PM
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>
++++++++++++++++++++++
Eddie Flowers on 06/09 at 06:05 AM
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">
<!-- -->
Eddie Flowers on 06/09 at 06:07 AM
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
Henry Contreras on 06/10 at 12:16 PM
.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
no on 06/11 at 02:36 PM
Patrick on 06/16 at 06:58 AM
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 :)
Stefan on 06/16 at 08:53 AM
The ability to set a min and max range. To disallow users from selecting dates outside the allotted range.
Lucas on 06/20 at 05:50 PM
$("#someTextFiel").datepicker(’destroy’);
Milton on 06/23 at 04:09 AM
As for your question, unfortunately, no, that’s not currently implemented. Once this widget is refactored using the jQuery UI widget factory (for inclusion in jQuery UI) though, that will be available. I suppose you could unbind the click event that it attaches to the input though, which would probably take care of removing most of the behavior.
Scott (Filament) on 06/23 at 09:04 AM
Auto Baneasa on 06/23 at 02:11 PM
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!
Jenny on 06/23 at 09:13 PM
eran on 06/24 at 09:30 AM
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})
}
Scott Brown on 06/24 at 03:22 PM
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?
Mike McNally on 06/25 at 09:12 AM
Mike McNally on 06/25 at 09:18 AM
Mike McNally on 06/25 at 09:20 AM
Mike McNally on 06/25 at 03:07 PM
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!
Cássio Marques on 06/26 at 07:30 PM
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/
Michael Ritsema on 07/01 at 03:13 PM
Nigel on 07/09 at 11:25 AM
Paul Russo on 07/13 at 02:27 PM
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
Chris on 07/15 at 09:15 AM
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!
JamesR on 07/15 at 10:23 PM
thommy on 07/20 at 08:59 AM
Does that make any sense?
Kevin on 07/21 at 01:17 PM
Chris on 07/21 at 01:34 PM
Kevin on 07/21 at 02:59 PM
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
NR on 07/21 at 04:11 PM
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);
}
}
Chris on 07/22 at 07:28 AM
$(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.
NR on 07/22 at 08:39 AM
“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.
Travis on 07/22 at 02:35 PM
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
cookie on 07/29 at 07:10 PM
Am tryin using this date picker in a popup form but it didn’t work.
Any help plz…
pans on 07/30 at 08:22 AM
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?
Jason Palmer on 07/30 at 04:35 PM
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 :)
Johan - KEYRIO on 07/31 at 04:52 AM
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!
Jason Palmer on 07/31 at 03:24 PM
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 on 07/31 at 04:16 PM
try
$(’#input_date’).daterangepicker( );
instead of
$(’input_date’).daterangepicker( );
Johan - KEYRIO on 07/31 at 04:36 PM
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?
Liam on 08/04 at 04:39 AM
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/dd/yy&enddate=mm/dd/yy” on the close function. Can anybody give me some insight into how to do this? Thanks!
Fritz on 08/06 at 04:08 PM
Fritz on 08/06 at 04:11 PM
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
Maverick on 08/09 at 09:12 AM
//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;
});
Travis on 08/14 at 08:28 AM
Travis on 08/14 at 08:32 AM
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.
Travis on 08/14 at 09:59 AM
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;
});
Travis on 08/14 at 01:33 PM
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;
});
Travis on 08/14 at 02:04 PM
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
Giovanni Battista Lenoci on 08/19 at 09:26 AM
jd on 08/19 at 01:11 PM
thank you!
awesome picker!
chris on 08/20 at 07:47 PM
<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"/>
Vladimir Smirnov on 08/24 at 07:09 AM
I learned lots of thing reading this post and specially comments, and specially thanks to Travis
Anyway, thanks for the post
software developer on 08/27 at 01:22 PM
$(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.
Brian on 08/27 at 01:51 PM
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.
Jason on 08/27 at 05:48 PM
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);
Jason on 08/27 at 06:06 PM
thanks
TJ on 08/28 at 01:02 PM
Did notice the date range allows you to pick an end date prior to the start date. Aug 3, 2009 to Aug 1, 2009
Mike on 08/31 at 01:56 AM
Stefan on 09/01 at 04:44 AM
Erik on 09/03 at 09:28 AM
Erik on 09/03 at 09:41 AM
http://www.filamentgroup.com/examples/daterangepicker_v2/index4.html
Since this uses the jQuery UI datepicker widget, I’d be curious to know if you can reporduce the issue on their demo pages:
http://www.jqueryui.com/demos/datepicker/
If so, please file a bug in the UI Trac system.
Todd (Filament) on 09/03 at 09:46 AM
Todd (Filament) on 09/03 at 09:53 AM
Thanks for any tips!
Ben on 09/03 at 07:49 PM
Luke Scammell on 09/05 at 06:06 AM
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
quim on 09/06 at 05:34 PM
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?
Alex on 09/07 at 09:22 AM
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
quim on 09/18 at 04:10 AM
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.
Chali Wires on 09/20 at 04:14 PM
Keep up the good work!!!
Chali Wires on 09/21 at 06:29 AM
$(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.
Romans Malinovskis on 09/29 at 01:46 AM
...but…
when I use daterangepicker in ui-tabs plugin .ui-daterangepickercontain display under body. datepicker work normally.
how fix it?
ploutos on 09/30 at 12:29 AM
Great plugin! Thank you
Frank on 09/30 at 08:52 AM
the language of the days. I know hot todo it with
the datepicker, but doesn’t work in this daterangepicker.
Martijn on 10/01 at 07:26 AM
Kris on 10/02 at 09:50 AM
- 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”
Peter on 10/06 at 10:55 PM
r. Sandor
carstep on 10/07 at 01:24 PM
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
carstep on 10/07 at 01:34 PM
Be careful using date format with jQuery or DateJS library.
Albert on 10/08 at 08:24 AM
Kyle Farris on 10/19 at 10:50 AM
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
quim831 on 10/22 at 08:54 AM
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!
CC on 10/22 at 06:02 PM
This is an very good solution !!! :) :) :)
Sun Location on 10/23 at 08:32 AM
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.
Greg on 11/10 at 12:20 PM
Is there a easy way to get all the dates included in a date range highlighted?
Thanks
Adrien on 11/11 at 04:15 PM
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.
Ed on 11/13 at 06:42 PM
Maxime on 11/23 at 09:07 AM
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 ~ :-)
Tomato on 11/26 at 10:02 AM
Basil on 11/26 at 10:02 PM
I’ve been trying to get this to work:
{text: 'Week to date', dateStart: function(){ var x = Date.today().getWeek(); return Date.today().setWeek(x); }, dateEnd: 'today' }
But it keeps saying that getWeek() and setWeek aren’t functions.
I have tried including the date.js file, but then it throws up the error ‘too much recursion’.
Do you know if there is a way to get these functions to work, as it would make the overall script so much more powerful.
Happy December!
Charlie
Charlie on 12/01 at 09:07 AM
Within the “onClose” event, how can I get the actual date value(s) that were selected?
Phil Desrosiers on 12/04 at 01:53 PM
Phil Desrosiers on 12/04 at 02:00 PM
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…
Phil Desrosiers on 12/06 at 06:12 PM
Timms on 12/10 at 10:00 AM
$(function() {
$("#datepicker").datepicker({altField: ‘#alternate’, altFormat: ‘yy-mm-dd’});
});
I haven’t been able to find through the doc’s on what to add.
Timms on 12/10 at 12:35 PM
Timms on 12/11 at 08:08 AM
* 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 ....]
Philip on 12/11 at 08:09 AM
At line 200 add this:
rp.find(’.range-start’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-start’).datepicker(’option’, ‘maxDate’, options.latestDate);
rp.find(’.range-end’).datepicker(’option’, ‘minDate’, options.earliestDate);
rp.find(’.range-end’).datepicker(’option’, ‘maxDate’, options.latestDate);
Grover Campos on 12/17 at 03:42 PM
Selva on 12/22 at 10:37 PM
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.
William Shostak on 01/05 at 11:00 PM
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.
Jessie on 01/06 at 03:16 AM
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 +” }
],
Daxon on 01/10 at 09:09 PM
{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(); }}
Daxon on 01/10 at 09:29 PM
Thanks!
Greg on 01/15 at 11:56 AM
Timms on 01/19 at 11:59 AM
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?
Pasci on 01/20 at 05:09 AM
LG on 01/20 at 10:51 PM
It would be amazing to have the 2 calendar screen pop straight down from the input box.
ian on 01/21 at 06:23 AM
varun on 01/22 at 01:12 AM
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.
supster on 01/29 at 06:03 PM
onOpen: function(){
var rp = $(".ui-daterangepicker:visible");
rp.find("ul").hide();
rp.find(”.ranges").css("marginLeft", “0px");
rp.find(”.ui-daterangepicker-dateRange").trigger("click");
}
alex on 02/01 at 04:20 PM
SteveA on 02/02 at 02:16 PM
$(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
Varunkumar on 02/02 at 11:43 PM
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" />
SteveA on 02/03 at 02:34 PM
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
tony on 02/04 at 12:11 PM
Something like…
$range = $_GET[’daterange’];
$dates = explode(” to “, $range);
$dates[0]; // start date
$dates[1]; // end date
Scott (Filament) on 02/04 at 12:54 PM
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
tony on 02/04 at 01:15 PM
how can get a specific theme from her
http://www.filamentgroup.com/examples/daterangepicker_v2/
and remove the left side (just show calender)
Sami on 02/10 at 05:58 AM
Todd (Filament) on 02/10 at 09:51 AM
http://jqueryui.com/demos/datepicker/default.html
the them color gray how can make this
Sami on 02/16 at 05:00 AM
I tried the code you provided above to no avail. Please help. I am a newbie.
brett on 02/16 at 10:26 PM
brett on 02/17 at 02:12 PM
$(function(){
$(’input’).daterangepicker({arrows:false});
$(’input’).click(function() {
$(’.ui-daterangepicker:visible .ui-daterangepicker-dateRange’).click();
});
});
brett on 02/18 at 02:18 PM
Can we get an update if and when this may be feasible?
Thanks
Steve on 02/18 at 02:38 PM
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
Matthew Scott on 02/19 at 06:14 AM
For example the date end cannot be before the date start and vice versa.
Matthew Scott on 02/19 at 06:15 AM
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.
alaa9jo on 02/23 at 10:09 AM
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 on 02/24 at 01:16 PM
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
Matthew Scott on 02/26 at 04:03 AM
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
Fernandos on 03/01 at 04:43 PM
Peter on 03/02 at 12:31 AM
Nice work and best regards
Ceana Razvan on 03/04 at 07:52 AM
Jeremy on 03/07 at 05:05 PM
ChazUK on 03/07 at 05:13 PM
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
lleto on 03/08 at 04:03 PM
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();
}
});
});
lleto on 03/08 at 04:30 PM
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/$.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!
alaa9jo on 03/09 at 03:02 AM
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.
James Alvarez on 03/10 at 08:57 AM
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?
Stephen on 03/21 at 03:03 AM
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html
Praveen Battula on 03/25 at 10:29 PM
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.
Bazmo on 03/25 at 11:29 PM
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.
Raccoon on 03/27 at 10:44 AM
The third paragraph of my previous comment was :
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’
Raccoon on 03/27 at 10:46 AM
Scott (Filament) on 03/30 at 10:29 AM
it just show the first five day
Sami on 03/31 at 02:58 AM
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
bitlink web on 03/31 at 01:09 PM
bitlink web on 03/31 at 01:11 PM
Nauman Akhtar on 04/02 at 03:10 AM
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? :-(
Stephen on 04/05 at 02:41 AM
valya on 04/05 at 12:46 PM
Scott on 04/06 at 06:17 PM
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?
Alex on 04/06 at 10:31 PM
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?
Scott on 04/07 at 11:10 AM
Scott on 04/07 at 03:01 PM
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.
Alex on 04/07 at 10:30 PM
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
Chali on 04/08 at 09:57 AM
so.addParam("wmode", “opaque");
Thank you anyways
Chali on 04/08 at 10:24 AM
MrHappy on 04/09 at 03:25 AM
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.
Alexey on 04/11 at 12:55 PM
chris on 04/11 at 01:47 PM
//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 ?
chris on 04/13 at 06:08 PM
//show, hide, or toggle rangepicker
function showRP(){
rp.parent().position({my: “left top”,at: “left bottom”,of: rangeInput});
.............
chris on 04/13 at 06:14 PM
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)
chris on 04/15 at 04:02 PM
sjc on 04/20 at 08:26 AM
sjc on 04/20 at 09:20 AM
neel on 04/23 at 07:44 AM
Thanks awesome plugin.
Vince on 04/23 at 09:26 AM
Thanks - Glad you like!
Scott (Filament) on 04/23 at 10:05 AM
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.
chris on 04/23 at 11:44 AM
- 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.
Shaun on 04/23 at 04:21 PM
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!
Stephen on 04/23 at 04:35 PM
Will never forget that though.
Vince on 04/24 at 05:39 AM
Several people asked already but no answer or help has been given to achieve this…
stephane on 04/27 at 10:35 AM
Can’t seem to figure out why. Any ideas?
Jon on 04/28 at 10:10 PM
good work.
Adam on 04/29 at 09:40 PM
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
kunal on 05/05 at 07:19 AM
Scott (Filament) on 05/05 at 08:46 AM
“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?
Josh on 05/05 at 04:51 PM
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.
Josh on 05/05 at 06:00 PM
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
Sithlord on 05/11 at 08:34 AM
Woo!
Federico Holgado on 05/16 at 08:59 AM
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.
Elad on 05/21 at 01:05 PM
Wayne on 05/25 at 12:16 PM
mumu on 06/03 at 12:40 PM
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;
Jaroslav Moravec on 06/10 at 04:27 AM
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.
roy on 06/12 at 05:50 AM
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.
Muhammad Shoaib on 06/13 at 05:16 AM
Fire onChange when widget is closed. Solution rought, but it works.
http://gsm-inform.com/modules/DateRangePicker/daterangepicker.jQuery.js
SAN on 06/15 at 02:00 PM
Nicholas Calugar on 06/15 at 07:01 PM
prodigel on 06/23 at 03:32 AM
JasonM on 06/24 at 09:36 AM
it’s too good but
It’s not working with jquery-ui-1.7.2.custom.min.js
plz help .....
samir on 06/30 at 02:02 AM
_____________
{<a href= http://cheap-cealis.drugs-rx.info/site_map.html >cealis
-free-prescription
2</a>
morsest on 07/02 at 09:31 AM
Rajesh on 07/14 at 01:50 AM
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.
dwenr on 07/17 at 11:10 PM
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
karan on 07/19 at 01:25 AM
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.
Diego Rin on 07/22 at 10:51 AM
Any advice?
Thanks.
scott on 07/23 at 10:32 AM
Jean on 07/23 at 03:37 PM
Nicholas Calugar on 07/23 at 03:48 PM
<%@ 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>
Jean on 07/26 at 12:19 PM
Nicholas Calugar on 07/26 at 12:33 PM
<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>
Jean on 07/27 at 09:33 AM
Nicholas Calugar on 07/27 at 10:37 AM
http://pastebin.com/XrmL3kis
Thanks.
Jean on 07/27 at 04:53 PM
Here is the code that is working for me: http://pastebin.com/TkF9CZ7V
Nicholas Calugar on 07/27 at 05:14 PM
any help would be appreciated
Rashid on 08/03 at 06:20 AM
tom on 08/04 at 03:00 PM
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.
Danny on 08/05 at 10:24 PM
VizjereiX on 08/06 at 02:13 AM
Is there a way to use a button instead of an input field?
Cheers.
Murphy on 08/10 at 05:38 PM
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.
Murphy on 08/10 at 07:22 PM
$(".datepicker").daterangepicker({
presetRanges: custom_datepicker_menu,
earliestDate: Date.parse(’2010-07-01’),
datepickerOptions: {minDate: Date.parse(’2010-07-01’)
maxDate: Date.parse(’Today’)}
});
Nick on 08/13 at 12:48 PM
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 on 08/14 at 05:51 PM
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
alaa9jo on 08/16 at 02:45 AM
LennyPain on 08/16 at 11:55 AM
Johngi on 08/17 at 06:26 PM
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
Mohan on 09/03 at 05:33 AM
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?
Kumar Saurav on 09/07 at 04:22 AM
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
IYS on 09/09 at 05:23 PM
<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;
});
Darren on 09/09 at 05:40 PM
$("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
})
});
Darren on 09/09 at 05:44 PM
Darren on 09/10 at 03:43 PM
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
Roberto Ortelli on 09/13 at 02:30 AM
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?
Marsil on 09/14 at 01:59 PM
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
Bosko on 09/16 at 06:56 PM
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
Bosko on 09/16 at 07:11 PM
Observative on 09/23 at 11:58 PM
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.
Jens Neumann on 09/29 at 03:16 AM
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!
C S R on 09/29 at 03:39 PM
beeko on 10/01 at 09:13 PM
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!
eyalec on 10/03 at 08:00 AM
It works great! thx.
eyalec on 10/03 at 08:21 AM
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 ^^.
Aldo_MX on 10/05 at 11:40 AM
Aldo_MX on 10/05 at 11:41 AM
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
Gray on 10/05 at 03:29 PM
Benjamin Nolan on 10/08 at 06:05 AM
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?
Benjamin Nolan on 10/08 at 06:07 AM
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 ?
ginnn on 10/18 at 10:50 AM
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....
ginnn on 10/18 at 11:24 AM
Josh on 10/23 at 02:04 PM
<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);
rakesh on 10/26 at 02:38 AM
Is there a solution to this? (please!)
Canadaboy on 10/26 at 02:52 AM
//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});
Canadaboy on 10/26 at 03:55 AM
- French translation or Change Days / Months in other language
basur on 11/02 at 04:09 AM
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.
DEN on 11/03 at 04:11 AM
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.
Samuel Brasington on 11/17 at 01:41 PM
Todd Ryks on 11/17 at 06:51 PM
This is the latest to date.
SAN on 11/19 at 02:29 AM
Chris on 11/22 at 03:54 PM
$(’#datePicker’).copyEventsTo(’#openCalendarImage’);
Also, if you *don’t* want the calendar to open up by clicking the textbox, just remove the events :
$("#datePicker").unbind();
Shaun on 11/24 at 12:04 PM
davidv on 11/29 at 04:36 AM
guest on 11/30 at 07:38 AM
Nice component, and fuly customize.
But… in documentation and examples there no about method get date (from first and second datepickers).
sigara bırakma on 12/01 at 06:00 AM
Thanks
Pete on 12/07 at 06:05 AM
John on 12/09 at 09:11 PM
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
Daniel Jaffe on 12/16 at 11:26 AM
i try this:
$("#form .items img").css({cursor: “pointer"}).click(function(){ $(this).prev().click().focus();});
but the datarangepicker fadein and fadeout.
Arnold
Arnold Roa on 12/27 at 06:23 PM
Christopher on 12/27 at 08:43 PM
Tyler Eckberg on 12/29 at 05:43 PM
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’);
LudoO on 01/19 at 05:42 AM
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.
Richard Korebrits on 01/21 at 04:39 AM
John on 01/25 at 02:15 PM
Todd on 01/26 at 01:29 PM
Rodrigo on 02/03 at 03:45 AM
**************
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’} );
**************
steve on 02/03 at 05:36 AM
Todd on 02/03 at 10:52 AM
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.
Etienne Coumont on 02/06 at 06:03 AM
carlos on 02/09 at 02:59 AM
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.
Shurid on 02/15 at 10:19 AM
But In IE-8, I faced may problem in event handler functions. onClose, onChange is not worked :(
So please help me for this.
Haresh Vidja on 02/16 at 12:12 AM
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
Alex on 02/21 at 12:40 PM
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.
Reshab on 02/25 at 11:25 PM
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 on 03/03 at 04:43 PM
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
Haresh on 03/04 at 02:26 AM
Great work!
Gudata on 03/07 at 11:33 AM
Mohan Ram on 03/09 at 01:08 AM
Simply You have to use onClose function… because I also faced this problem ;)
Haresh on 03/09 at 04:25 AM
While using previous and next button i cant trigger function [Whenever changes occurs i need to trigger a function] Say me a simple possibility
staytouch on 03/09 at 04:31 AM
Paul Vernon on 03/09 at 11:57 AM
Wibawa on 03/10 at 11:18 AM
staytouch on 03/15 at 12:59 AM
arunkumar.p on 03/18 at 12:38 AM
Wordpress Developer on 03/20 at 11:21 AM
Evan on 03/22 at 02:53 AM
Eric on 03/22 at 04:03 AM
$(’#time’).daterangepicker({
datepickerOptions: {
showOn: “button”,
buttonImage: “images/calendar_icon.gif”,
buttonImageOnly: true
}
});
Suggestions?
Thanks!
Kate on 03/27 at 11:20 PM
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!
Luigi on 03/31 at 07:59 PM
DCS Solution on 04/14 at 08:22 AM
Luigi on 04/14 at 09:13 AM
DCS Solution on 04/14 at 09:19 AM
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
selvi on 04/16 at 04:52 AM
Joel Lazzari on 04/16 at 04:26 PM
Travis on 04/19 at 10:24 PM
Luigi on 04/20 at 08:54 PM
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);
Dave on 04/28 at 08:06 AM
I doubt anyone has a solution however.
jc on 04/28 at 10:24 AM
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;
});
jc on 04/28 at 02:10 PM
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!
Livestate on 05/03 at 04:12 AM
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.
Tom R on 05/11 at 06:30 AM
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.
Adam Fekete on 05/17 at 09:39 AM
$(’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.
Adam Fekete on 05/17 at 09:54 AM
Kate on 05/18 at 12:17 AM
n0nick on 05/18 at 03:12 AM
Sune Westphalen on 05/19 at 09:19 AM
Comment by Scott (Filament) on 01/19 at 12:30 PM
?
Adam Fekete on 05/19 at 09:49 AM
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.
Adam Fekete on 05/20 at 06:38 AM
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?
bobbytuck on 05/24 at 03:39 PM
employee training and development on 05/31 at 10:08 PM
Thanks
ramu on 06/10 at 01:28 AM
Thanks
Ang on 06/15 at 03:01 AM
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
Red on 06/19 at 02:06 AM
Red on 06/19 at 02:19 AM
Add to ui.daterangepicker.css at EOF: .hasDatepicker DIV { display:block; }
Red on 06/19 at 02:42 AM
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 ?
Sven on 07/02 at 05:57 PM