My jQuery datepicker is a jQuery plugin which allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.
Examples
There are full examples of many different use-cases for jQuery date picker all available from the datePicker homepage.
Version
The jQuery datepicker plugin is currently at version 2.1.1.
You can keep up with all changes to the date picker using the project feeds from the plugin’s googlecode page.
Download
The date picker plugin has it’s own googlecode site – this is where the latest sourcecode and releases can be downloaded from. The latest release will always be a featured download and the cutting edge code will be found in the svn trunk:
http://jquery-datepicker.googlecode.com/svn/trunk/
Previous releases will be tagged in the Subversion tags directory:
http://jquery-datepicker.googlecode.com/svn/tags/
Bug reporting and feature requests
Please submit any bug reports or feature requests through the issues list on googlecode. Please remember to include all information necessary to replicate the bug, including effected browser and operating system and a URL to a test page displaying the problem. Please also first search through the issues list to see if there are any existing related issues.
Donate
The date picker plugin is completely free and open source. However, if you find it useful and you would like to make a donation towards my beer fund then please use the paypal button below to donate any amount. Thanks!
359 Comments, Comment or Ping
hey! awesome work on that Jquery calendar picker!
if you could select a time with it... then i would say it's complete :-)
any thought on that? i'd be happy to test, i want to integrate that into Drupal as a new module to get rid of the clunky JSCalendar class
August 25th, 2006
Hi ted,
Thanks for the feedback. Unfortunatly at this time I’m not planning to add a time picker to the date picker simply because most use cases I can think of for a date picker don’t also need a time picker. I feel it would be better implemented as a seperate plugin…
Cheers,
Kelvin :)
August 29th, 2006
Hi! Thanks for the great plugin! Is it possible to show days outside the current month, eg. last few days of previous month and first few days of next month
September 4th, 2006
Hi,
Glad you like it :)
It isn’t possible to show the days outside the current month without modifying the core code. I’m busy with other stuff at the moment but will put this on the “todo” list,
Cheers,
Kelvin :)
September 4th, 2006
Like the simplicity of your plugin.
If you get a chance to add a time picker I’d definately switch to your plugin over my current date plugin DHTMLCalendar
September 19th, 2006
thanks for contributing this great plugin to the community, and thanks for not bloating it up with unneccessary features!
September 20th, 2006
Hi, very nice plugin… exactly what I needed! Except I can’t get the calendar to popup. I’m getting the calendar icon to appear… and have initialized the calendar by following your directions but nothing yet. I’ve tried the posted source and the source from svn. Any ideas?
September 26th, 2006
Cool plugin. I have my input box to the right of the screen, when I click the calendar icon the calendar opens to the outside of the window’s viewport. How can I reposition the calendar so it is to the left of the input box.
September 26th, 2006
Hi guys,
Glad you like it…
@Matt – does it work on my demo page for you? What browser / os are you using?
@Mike – I plan to add in some code to a future version which will automatically make sure the calendar is visible. For the meantime you will need to edit the CSS for div.popup-calendar (line 64 of styles.css). Unfortunately you will also have to edit the JS for IE – see line 197 of datePicker_source.js
Cheers,
September 26th, 2006
Yes it does work on the demo page!? I’m using Safari and Firefox. Any ideas?
– matt
September 26th, 2006
Hmmmmm – no!
Have you got a version of your test page online somewhere I can see? Have you put all the CSS and JS on your site?
Cheers,
September 27th, 2006
Hi Kelvin,
Cheers for that, it works better if you take line 197 out and then feed IE6 a specific style for the ‘right’ (as opposed to left) position using conditional comments :)
October 3rd, 2006
Hi Mike,
Good idea. Like I mentioned above, when I get a chance I’m going to look into making the calendar position itself more intelligently and hopefully at that time I can figure out why IE is misbehaving…
Cheers,
October 3rd, 2006
Its looking great.
Also, it may be a good idea to allow for year switching as well.
October 5th, 2006
hi, first sorry for my english, really is to bad.
if i want too preselect a date (for example if the date is provided from a database), i put the date in input field, but if the date is one or more months older than actual month it does not work.
how to preselect any date…?
October 14th, 2006
Hi,
You should be able to preselect any date but if you want the date to be in the past you need to make sure you have passed in a startDate in the past when you initialise the date selector,
Hope that helps,
October 14th, 2006
was playing around with your date selector. love it but it didn’t do every thing that I wanted (allow dates in the past, allowed user to jump forward/backwards in year increments) so I modified your source file email me and I’ll supply you the changed file which you can then diff.
thanks for such a easy way of adding date functionality to a web site.
October 17th, 2006
Hi Adrian,
Thanks for the feedback. It’s a common misconception that the date picker doesn’t let you pick dates in the past but you easily can by passing in a suitable ‘startDate’. I need to update the demo pages when I get a second so there is one that makes this more explicit.
I’ll get in touch with you re. seeing your changes for the year increments and will think about integrating them when I get a second (very busy at the moment!),
Glad you like the date picker,
Cheers,
October 18th, 2006
Great plugin, does exactly what I need. Thanks!
I also need a calendar to embed into a page to provide navigation around an events listing. Is it possible to embed the datepicker’s calendar straight into a page, by passing the input box?
October 25th, 2006
Any chance you could extend the plugin to be able to disable days? For instance, disable all saturdays and sundays, or disable the first wednesday of each month? I think that would really help make it more customizeable.
November 1st, 2006
could not figure it out myself but it would be nice if the iframe was created with the propperties frameborder=0 something like $.IFRAME); so that the css still validates meaning not have to use the filter:mask();
November 2nd, 2006
Hi guys,
@Jon – At the moment it doesn’t work like that but I’ll consider it when I next get a chance to do some work on the plugin (which won’t be for a couple of weeks at least!)
@refactored – Good suggestion but unfortunately the same answer as to Jon – I’m too busy at the moment to implement it but will try to ASAP.
@john – Another good suggestion and one that’s already on the TODO list. The IE no select hack should be added in with JS rather than being in the stylesheet and this will be done when I next work on the plugin…
Thanks for the feedback everyone, sorry I don’t have the time right now to integrate the ideas…
November 2nd, 2006
Hi. This is fantastic!
I’m wondering though, how to get the value of the input field after the date is chosen from the picker.
thanks!
November 13th, 2006
BTW, I can access the field using “onchange” but only if I type the date in. I would like to know what the event call is after choosing a value from the datePicker.
Thanks!
November 13th, 2006
Hi, glad you like it :)
It depends what you want to do with the value in the input field. The normal usage would be to submit the form and then the date will be available to your serverside script.
Or you could grab the date back out using jQuery and do something with it:
$(’#your-input-id’).val()
Should do it…
Hope this helps,
Kelvin :)
November 13th, 2006
Heh. Basically, I’m trying to use an AJAX call to update a text area field w/ database content. That DB content requires a date parameter and so I wanted to use the datePicker. :)
Right now, if a user types in the date (11/14/2006), then the “onchange” event calls the JS function which makes the AJAx request to the db and then displays it in the text area.
This then allows the user to proofread or edit the text for that chosen date. Once approved or changed, then they hit submit and updates the DB.
So, really I guess what I need to know is if there is an event handler for the datePicker.
Thanks for any help! :)
November 13th, 2006
Hi Jud,
Sorry – I misunderstood you originally… Now that I understand you I just did a quick change to the date picker source which makes sure that the INPUT’s onchange event is triggered when a date is selected. Check out the plugins page again to grab the update (note that the packed version isn’t up to date because Dean Edwards packer is currently unreachable).
Hope this helps,
Kelvin :)
November 13th, 2006
Fantastic! Thank you so very much for going out of your way to do this!
I’m sure there are other devs who’re going to love this!
November 13th, 2006
hey! Love this calendar! Works great, but I don’t see the icon. Using IE6 on XP.
Does it matter if I have the icon in an images folder? I’ve modified the CSS to: images/calendar.png, but it’s not showing. any ideas?
November 15th, 2006
Hi :)
It doesn’t matter where the calendar image is, you just need to make sure it is referenced correctly in the CSS . Bear in mind that the path to the image in the CSS is relative to the CSS file, NOT the HTML file.
Hope that helps,
November 16th, 2006
I do have the correct path to the images because when I remove “no-repeat” it appears. Also, I don’t have a link when I publish the file online. Offline, there’s still no icon, but at least I can hover in the right area, see the cursor change and click. Online, none of that. Any ideas?
November 16th, 2006
Hmmmm – I’m afraid I’ve got no ideas. It sounds like something in your CSS is clashing with something in the calendar CSS… Is your calendar field in a table cell? Someone else had some issues with that – does that help you at all?
Cheers,
November 16th, 2006
I’m sure it’s a CSS error so I’ll have to tinker with it. It’s not in a table (I don’t use them anymore! :D )
Thanks again!
November 16th, 2006
Hi Kevin,
great plugin, ive included in a open sourec app im working on (www.simpleinvoices.org), just wondering are there any plans to add an option to move forwared/backwards by years as well as months
Cheers
Justin
justin@kelly.org.au
November 16th, 2006
jquery datepicker: I’d like the starting day of the week to be configurable. Here in europe it’s rather monday than sunday. Otherwise great ;-)
November 17th, 2006
Hi guys – thanks for the feedback…
I’m hoping to do some work on the plugin at some point soon and will definitely integrate the week start request. I’m still personally not sure if the jump by years functionality belongs in the plugin but it has been requested many times so I’ll try and add it in…
Cheers,
November 18th, 2006
Hi Kelvin
I am adopting jQuery as my JS Framework and would love to use your calendar for the booking forms on my site. However, I am forced to use 3 select fields for the date (1 each for day, month and year) because it submits through to a 3rd party reservation system. I was wondering if your date picker could be configured to work using select fields like mine?
Thanks
Mike
November 21st, 2006
Hi Mike,
It’s not currently possible to do that with the date picker. It would be a nice feature though and I’ll stick it on the TODO list for when I next get a chance to work on it,
Cheers,
November 22nd, 2006
Hiya all,
I too am loving this plugin – there is, however, one issue I’m trying to solve and maybe I’m just not looking well enough. I’m hoping you can help me on this one.
When I apply the date selector to an input, the size of the input (which is padded in my layout) resets and – being a perfectionist – I was wondering if there’s any way of keeping exisiting styles. I’ve looked into the CSS and deleted every line where it says padding: 0 or margin: 0 and (surprisingly) not much happened.
Any ideas would be greatly appreciated ;)
December 3rd, 2006
Here’s a vote for keeping the plugin lightweight and not adding too much features.
A bit related to lightweight: paging months is a bit “sluggish”. Any ideas on how to improve the speed of _getCalendarDiv()?
December 4th, 2006
@Arthur – glad you like the plugin and contacted me direct to let me know you figured it out and started editing the right CSS!
@Anders – glad you agree about keeping the plugin lightweight. Not sure why it feels sluggish to you – I guess we could investigate creating the calendar popup once and then updating the fields within it rather than recreating it from scratch each time but I’m not sure this will help…
December 4th, 2006
I used the brand new Firebug 1 beta “Profile” feature, which showed that both changeMoth and _getCalendarDív averaged around 150ms. I’m not sure if you add them or not to get the “real” value. Anyhow, when clicking fast through the months, I can clearly feel a lack of responsiveness, it’s not huge, but still there. I compared that with the google calendar version which feels more responsive, and it seems to average around 30ms (not so obvious there which functions are being called).
December 4th, 2006
Nevermind the thing about adding the two times, it’s of course only one that counts as changeMonth calls getCalendarDiv…
December 4th, 2006
I’ll try and take a look into speeding up _getCalendarDiv when I next get a chance to work on the datePicker and I’ll take a look at how the google calendar one does it (btw – where can I see that?),
Cheers,
Kelvin :)
December 5th, 2006
http://google.com/calendar -> “Create event” :)
December 5th, 2006
Cheers :)
December 6th, 2006
Any chance we could have multiple dates selection?
Right now, I am using Dynarch Horizontal Menu which does that.
I //would love// dropping this library and use only jQuery. But I need this functionnality.
Your plugin is awesome and I would replace hmenu right now if I could.
I have to thank you. Not only is it very useful, but I learned a lot with it. Thanks again.
December 27th, 2006
Hi,
I guess you mean the Dynarch Calendar (not menu)?
There are a number of improvements I have planned for the date picker but to be honest I think multiple date selection will be at the bottom of the list…
The problem is that it is quite a fundamental change as a date picker is currently by definition attached to one INPUT field and it would be an issue adding multiple dates to one field…
If there are enough requests for it (and I get enough time!) then I will consider adding it though…
Glad you like the plugin,
Kelvin :)
December 28th, 2006
This is indeed a great datepicker. I would also like to put in a request in for a way to embed the calendar in the page, instead of popping up.
Keep up the great work!
January 10th, 2007
A superb date picker and easy to customise. It saved me a large javascript headache with some legacy code. If you want to style the inactive table cells further you may have to change the empty string to a non-breaking space so IE renders it properly.
January 12th, 2007
Hi Kelvin, I use your nice stuff on a site.
But (maybe you know) it doesn’t work with the new 1.1 beta version of jquery.
January 13th, 2007
I’ve ben using jscalendar, and then I recently discovered jquery and would love to consolidate all of my disparate js effects and tools into the framework. Is there any chance that there will be an update to datePicker in the near future? I’m looking specifically for a couple of features that have already been mentioned:
-move by year (via dropdown for distant year values)
-optional time selection
jscalendar has a boatload of additional features, but the ones that I’d be hoping for are:
-more configuration options for returned date/time format
-allow user to move the DIV
January 15th, 2007
Hi Kelvin!
I hope, soon you will update your great datepicker to work with the new 1.1 version of JQuery.
January 15th, 2007
datePicker appears not to work against jquery 1.1.
January 15th, 2007
Hi. Great date picker.
However, it may have broken for jQuery 1.1
I’m trying to use it with the latest jQuery and I get the following error:
_firstDate has no properties
on line 79 in uncomprssed datePicker.js
I haven’t looked too closely for the reason, as I still not too sure what to look for in jQuery :) But the problem is there :(
January 17th, 2007
Is it compatible with jQuery 1.1?
January 19th, 2007
I’ve just updated the date picker and it is now compatible with jQuery 1.1 (I had to work around a bug in the jQuery core),
Cheers,
January 21st, 2007
you can’t chain methods on the datepicker after setup, since its not following JQuery conventions. a ‘return this’ fixes this:
diff—git a/s/jd.js b/s/jd.js
index ec3ecab..d5b163f 100644—- a/s/jd.js
+++ b/s/jd.js
@ -407,7 +407,7@ jQuery.fn.datePicker = function(a)jQuery.datePicker.setInited(this);
}
}); – +return this;
};
January 21st, 2007
In IE7, if you pick the left picker on the demo page, the input fields shows through the calendar.
January 23rd, 2007
Thank you for the new version!
You forgot to update the LastChangedDate field in the source:
$LastChangedDate: 2006-11-26 17:52:59 +0000 (Sun, 26 Nov 2006) $
January 23rd, 2007
@carmen & Gyulus – thanks for the headsups, I’ve now added these in.
January 23rd, 2007
Hi Kelvin,
i would too love the “multiple dates” functionality: it’s very useful for theatres and cultural places, where content administrator needs to enter all the dates for one show. in fact, you would use the calendar to fill in the value for a hidden input field, returning a string with all dates separated by, say, a semicolumn.
January 28th, 2007
I think that have a bug when serving jquery date-picker as xhtml (xhtml1-strict with php headers). header(“Content-Type: application/xhtml+xml; charset=utf-8”); Firebug 1.0 return: An invalid or illegal string was specified” code: “12” Serving as text/html dont´t have problem… Tks for excelent script!
January 28th, 2007
Hi Kelvin,
Great plugin. I ran across an issue with setting the start date:
$(’#date_chooser_date’).datePicker({startDate:’11/11/2006’});
For whatever reason, the start date is ignored, and any start date is selectable
thanks,
Mike
January 29th, 2007
Hi Kelvin,
can you give an example to call selectDate(d, ele) on datePicker? I don’t which I should pass to ‘ele’ parameter
January 30th, 2007
Hi guys – thanks for the feedback.
@ Alexandre – maybe this is a problem that could/ should be solved in the page. So once a date is selected an extra input field with datePicker is dynamically added to the page. Rather than adding code to deal with this directly into the plugin (which I want to keep lightweight)?
@Jacques – this is probably because the calendar elements are created via jQuery which uses innerHtml which isn’t allowed in true XHTML. There was an interesting discussion about that on the jQuery mailing list today – the conclusion seems to be that the world isn’t yet ready for pages served as true XHTML.
@Mike – I can’t replicate your problem. startDate sets the first selectable date. So the user should be able to select any date between that and endDate. Is this different to what you are seeing?
@Fei Yang – I’m not sure what you are trying to do. That is an internal private method. If you want a different date to be selected in the pop up calendar simply put that date into the input field and it will automatically be selected in the calendar when the calendar pops up,
Hope that all helps!
February 1st, 2007
hi Kelvin!
other question: i get the input date from mysql, which has a built in command for outputting it the way i need (date_format(mydate,’%d-%m-%Y’))
but mysql does not have a built in function for formatting the date back to mysql format on INSERT/UPDATE.
question: wouldn’t be useful that the plugin allows to set the input date format (dmy) and the output date format (Y-m-d) ?
thanks for the great plugin !
February 7th, 2007
Hi Alexandre,
Why not use:
$.datePicker.setDateFormat(‘ymd’,’-’);
(example from the “usage” section of the plugins page)?
Hope that helps,
February 7th, 2007
We’re trying to make the switch from jscalendar to this great jquery calendar. One big issue is that we need to limit the dates; more than just start and end dates. As in jscalendar, I want to be able to pass a custom function during the init and have it run when each day is being output to determine whether or not to show the date. That will allow arbitrary date selection criteria, such as every Thursday, no weekends, etc. I attempted to modify the code, but couldn’t get the function to be defined within the object (I’ve never written a jquery plugin before). Any ideas or help or plans for the future?
Thanks,
Mark
February 8th, 2007
Hi Mark,
I really like the idea of an optional custom callback function which could be run for each date output. This would allow a great deal of extensibility without making the plugin too heavy… It could simplify the plugin itself as well by abstracting out some of the logic which is stuck in the dates loop. I’ll look into this when I next get a little bit of spare time…
Cheers,
February 8th, 2007
Kelvin,
Thanks for the work you’ve done here.
I have a setup where the user enters a start date and an end date. I’d like the end date calender to default to the month of the date set in the start date field (sorry if that’s confusing). This might have the same solution as mentioned above with adding a custom callback function. Is there a way to accomplish what I’m trying to do now?
February 8th, 2007
Hi Mike,
This is a normal use of the date picker and I would like to add some code to make it easier… At the moment I’m totally snowed under though :(
In the meantime, you can listen for the “change” event on the first textfield and can use this event to copy the value from the first field into the second field. Then the second calendar will have the first chosen date selected when it’s first popped up…
Hope that helps,
Kelvin :)
February 12th, 2007
Hi Kelvin.
Great plugin! I just have a suggestion for it: check if the related input is enabled before opening the calendar. I made a patch like this on the show method:
if ($(input).is(’:disabled’)) {
return;
}
February 19th, 2007
Hi Celsius, ummm, I mean Kelvin! :)
Great date picker! Only one small problem: I can’t get a label text to appear in front of the input box. I must be missing something. Any ideas what?
Thanks and regards from Slovenia
February 21st, 2007
Hi Kelvin
Having a problem with the datepicker which someone else mentioned previously but when you open the datepicker it shows through input boxes and table cells, this only happens in ie though (5.5, 6, 7) any ideas?
Thanks, Tom
February 22nd, 2007
Hi Guys,
@Nando – nice idea – I’ll add this in.
@Mark – not sure I understand your problem… You mean you can’t figure out the CSS to get a label sitting infront of the input? Maybe because the input gets wrapped in a div class “date-picker-holder”?
@Tom – Hmmm – you shouldn’t be having this problem. There is code in the plugin to prevent this happening. Do you see it on my demo page?
Cheers,
Kelvin :)
February 22nd, 2007
Hi,
yes, I can’t figure out the CSS to get a label sitting infront of the input. Can you help me with this one? Pleeese!
February 22nd, 2007
Hi Kelvin, thanks for the quick response, i checked on the demo page and in IE your calendar is also being covered up by the text box, i think someone mentioned the problem before but dont think you answered it, its a problem which might not actually be fixable with the current setup on the page but if you can help it would be much appreciated, thanks, Tom.
February 22nd, 2007
Hi kelvin, have sorted the problem it was the containing div, had set zoom 1 to fix an issue with the height of a bar but that was causing the calendar to fall behind certain things but have fixed it now
February 22nd, 2007
Isn’t anyone else having this IE7 problem where the input text field shows through the calendar? Here it shows through for everyone.
February 22nd, 2007
Hi,
@Mark – does maybe floating the label left help? Check out the styles on “date-picker-holder” – maybe you’ll need to tweak them too…
@Tom – glad you figured it out – I was confused because it works fine in IE6 here…
@Oliver – I haven’t got IE7 here so I’m not sure but the problem has been reported to me before. I thought someone had solved it but I can’t find the details at the moment. I’ll try and test on IE7 when I get a chance, in the meantime I’d appreciate any suggestions…
Cheers,
Kelvin :)
February 22nd, 2007
yes… custom callback sounds good. then we can create one for ISO8601 date format
February 23rd, 2007
It’s a great plugin, thanks.
if there is a year switching function would be better.
would someone share this part before kelvin working on it?
February 26th, 2007
Hello Kelvin,
great work on the plugin, it won’t render properly in IE 6.0 on linux (IE4linux), it works great on firefox though…
February 26th, 2007
I would like to echo the earlier requests for multi-date selection capabilities.
Great work!
February 26th, 2007
I am also having the issue in IE 6 and 7 where the calendar displays behind all other elements (in my case, behind select boxes, input elements, horizontal rules, EVERYTHING). Have tried mucking with z-indices, and nothing works. If necessary i can send over a reduced test case.
Adrienne
February 26th, 2007
I had a problem with the calendar showing up perfectly at first, but as soon as I click next to change months the style changes and the Saturday column is partially missing. I’m using the Yahoo YUI fonts, resets and grids css plus some other css I’ve put together. I wouldn’t think it’s interfering, but maybe that’s the case. I jsut adjusted some font sizes, and padding etc and now it works. Any ideas?
Great plugin—super simple!
February 28th, 2007
Hi guys,
I can’t replicate any problems in IE6 on my test page on multiple machines here. Do you have a standalone version of IE6 running alongside IE7? I’m afraid I know nothing about IE6 on linux but I’d probably use firefox on linux anyway!
Re. the style changes used alongside YUI fonts, resets and grids, I’m afraid I have no idea. I guess the CSS must be clashing in some way – if you have an example page I can take a quick look?
Cheers,
March 1st, 2007
Hi,
Your date picker is great and so easy to install.
Just noticed 2 problems.
1) the linux problem (when you click fast) seems to be still there
2) Could it be possible to have dropdowns to select month and year ? I need to select dates in the next year (2008).
Good job.
Chag
March 5th, 2007
Hi Chag,
Both of those issues are on the TODO list but it’s a question of finding time to do them! I’ll post here when I get round to it…
Cheers,
March 6th, 2007
Hi,
I am facing a problem with IE6,a part of the calender date picker is displaying behind the dropdown control.Hope i am clear please slove my problem.
March 6th, 2007
Hi Santy,
You are one of a number of people reporting the problem in IE6 but I can’t replicate it on any of the computers I’ve tried. What exact build of IE6 is it? Have you done a windows update recently or something? Is it happening on my demo page?
Thanks for any help tracking this down,
March 6th, 2007
Is it possible to use it without a date separator? I’m using a DB date-format like yyyymmdd with no separator. Seems it defaults to / when I try to specify blank.
March 6th, 2007
jon : look at the source, there’s a line a the beginning :
dateSeparator = ”/”;
try to remplace with
dateSeparator = “”;
March 7th, 2007
Dear Kelvin,
Great plugin, thanks for contributing it!
I have a feature request for startDate:
allow values like ”+1” or ”-3” (today + 1 day or today – 3 days).
Best regards,
René
March 9th, 2007
Dear Kelvin,
I’ve a problem with your plugin when try to use it with niceJform plugin. When used together the small calendar link-image is on the right of textinput, but then the text input style is messed up. I figure out, that when I change in calendar css this:
div.date-picker-holder input {float:left;}
into this:
div.date-picker-holder input {float:none;}
the textinput looks fine. But the small image-link jumping down, below the textinput. Any help would be great!
Best regards
March 14th, 2007
Hi Kelvin,
I’m trying to use datePicker as a calendar only (allways opened, no date selection…). Do you know if there is some done work in this topic?
Btw, I was experimenting the problem with IE about images and widgets that appear through the calendar (http://www.nocaduca.com/dp/test_datepicker.htm). I have testing (in firefox everything is ok) and i should take out a position:relative in the img.. but is this the point? I need that position:relative :(
March 15th, 2007
Hi again…
I fixed the problem with IE taking the position:relative out, eventually.
But in the former question (about using datePicker as a calendar), I can’t get by on showing the pop-calendar without throwing any event! Is it jQuery.datepicker.show(this)? this.datepicker.show()?... :(
March 19th, 2007
Hi xema, how did you manage to solve the problem with IE ? i have the same problem with images overlaping the calendar (in IE7). I have the problem on kevin’s test page too : http://kelvinluck.com/assets/jquery/datePicker/
March 22nd, 2007
Actually, on kelvin’s test page, when i open the Date 1 calendar, i can see Date 2 input and image through it…
I’m using IE7
March 22nd, 2007
Hi,
I finally managed to borrow a laptop with IE7 on it and fixed the IE7 “see through calendar” bug. Check the demo page and the source files (note that there were changes in the CSS as well as the JS files – see all changes here)...
Cheers,
Kelvin :)
March 22nd, 2007
Can it be modified to allow and start date in the past?
March 24th, 2007
Hi Shelane,
I’m not sure I understand. You can pass whatever dates you like in for startDate and endDate (see the example on my page),
Hope that helps,
Kelvin :)
March 25th, 2007
What I mean is that I’d like to not have to pass end a start date the way you don’t have to pass an end date to allow it to go on forever. I’m not sure how far back my users might need to enter information for (their birthday for instance). I suppose at worst I can go back 100 years.
March 27th, 2007
Hi Shelane,
Ahh – I see. For me a much more common use case is in booking something (flights, tickets, whatever) where it is necessary to only be able to pick a date in the future. That is why I decided that no startDate means that today is the first available day.
I don’t think the datePicker is a great tool for selecting birthdates or any other day far in the past or future (due to the amount of months you need to click through to get there) so I don’t think that a “no first date” ability would be that useful. As you say, you can pass in a date hundreds of years in the past which should be sufficient,
Cheers,
Kelvin :)
March 27th, 2007
Dear Kelvin,
I have the same showthrough issue with IE 6/Win and the current and previous datePicker version (datePicker laps over TinyMCE toolbar buttons), z-index didn’t work either.
My feature requests:
1) setChooseDateStr(newTitle).
2) Hooks after _closeDatePicker() and before show().
Best regards, greetings from Germany,
René
March 29th, 2007
Hi Kelvin! There is a bug in datePicker, concerned with ssl. If you access the site over https, at the time of the first use of calendar (first clicking on it), you get IE security alert “This page contains secure and non secure items”.
Best regards,
Oleg
March 30th, 2007
Hi,
@René – thanks for the feedback. I’m currently specifying a new version of the date picker with the help of Jörn Zaefferer, Paul McLanahan and Brandon Aaron and will take these observations into account. It will be started from scratch and should hopefully add new functionality and clear any old bugs :)
@Oleg – thanks for the report. I don’t currently have access to a https server so can’t test – could you edit line 198 of datePicker_source.js to read:
if (false && jQuery.browser.msie)
and let me know if you still get the error? (this will allow selects to shine through the date picker but I’d like to know if this block is causing the problems so I can take it into account for the new version),
Thanks,
Kelvin :)
April 1st, 2007
This is wonderful and lightweight. My only complaint is the need to use the icon. I would really like it if I could have the option of having it popup when the user clicks (tabs?) into the date box.
Thanks for all your work, you have made my life easier.
April 3rd, 2007
Hi Donovan,
Glad you like the date picker :)
There is already a (undocumented) option to have the calendar popup when an input is clicked on rather than the calendar – just pass inputClick:true in when you initialise your date picker. e.g.
$(’#input-id’).datePicker({inputClick:true});
Hope that helps,
Kelvin :)
By the way, I’m just about to go on holiday for a week – when I get back I will be finishing up the rewrite of datePicker.
April 3rd, 2007
Hi Kelvin!
Yes, you’re right. Security alert is caused by iframe.
Could you please email me if you have ideas about solving this problem?
Best regards,
Oleg
April 4th, 2007
For those of you needing year selection…go here:
http://codetale.com/2007/02/23/javascript-calendar-widget
I would rather use a jquery plugin but this will do the job for now.
April 4th, 2007
Thanks for this, I love jquery, this is another great plugin.
I had to comment out line 258 to get r1566 to run.
April 4th, 2007
Hi again!
Kelvin, let me propose a solution of “IFrame vs. SSL” issue to you.
“The warning message occurs because Microsoft Internet Explorer is unable to determine if the SRC attribute of the IFRAME is secure or unsecure.” (http://support.microsoft.com/kb/261188)
So I just added the SRC attribute to IFrame (Line 201 of datePicker_source.js):
iframe src=”javascript:false;”
Construction like
iframe src=”//0”
doesn’t solve the problem, because in such case the security alert occurs on clicking “Next” button on calendar.
Thank you for your great work. Best regards,
Oleg
April 5th, 2007
I am having a hard time getting select elements with the multiple=”multiple” attribute not to show through the calendar. Is this a known bug?
April 5th, 2007
Hi Kelvin!
One more bug in datePicker :)
SELECT displays through the BORDER of calendar. For example, change the background color of the example page and you’ll see.
April 11th, 2007
Re: Security alert and iframe. Whenever I have seen that problem, the iframe’s src attribute has been defaulted to about:blank. To eliminate the security alert we default the src attribute to blank.html which is just an html page with an empty body. I’m not sure if that will help in this case but it has worked for us in the past.
Good Luck,
Tony
April 11th, 2007
Hi,
@Chris – or if you can wait for a little while then hold out because year selection will be available in datePicker v2 which is currently being worked on…
@Seth – thanks for the headsup. I’d left some debugging code in there. Although the problem wouldn’t have effected most people because if you are running firebug or window.console == undefined (e.g. as it normally would be) then there would be no problem – it must have been conflicting with some other logging solution you are using on your page?
@Oleg – thanks for the further investigations. I’ve updated the plugin to set the src for the iframe to a blank.html page I’ve created as suggested by Tony – does that help?
@Luke – this isn’t an issue that I’ve run into before. In fact, I can’t replicate it on IE6 – do you have the problem on this page?
@Oleg (again!) – thanks for the headsup re. the border. I’ll see if there is anything I can do about this in v2 of the datePicker.
Thanks for all the feedback guys,
Kelvin :)
April 12th, 2007
Hi Kelvin!
1) r1672 – Yes, I tried the construction like
iframe src=”blank.html”.
That really works but we need an additional dummy page :(. So I use the construction src=”javascript:false;”.
Please, notice that I’ve tested it under IE6 and Opera 9.02 only.
2) Do you already have a working solution of the border problem? Can you public the approximate date of v2 release?
April 16th, 2007
Hi Oleg,
1) Do you still get the security error on clicking the “Next” button with the iframe src=”blank.html”?
2) No solution for the border problem I’m afraid. Are the borders essential to your design? You could just remove the borders…
As for a release date for v2, I’d hope to have a beta version publically available in the next few days.
Thanks,
Kelvin :)
April 16th, 2007
Would be great to have the week number optionally displayed on left of each weeks.
April 16th, 2007
Kelvin,
Yes that is what I thought about your debugging code. The problem happened in IE6 and Firefox (w/ Firebug). I am working within the BEA WebLogic console, so BEA may have something else that is going on causing the conflict? I am not using any logging directly, but that is a problem with this portal development, I never know what is affecting my portion of the page, my code or all the other BEA code I cannot control. I am also having trouble with inputClick:true in IE6 and a readonly (yes I am aware that there are other potential usability issues), input but again the problem may be BEA and if so I do not think the benefit of a solution would justify the work.
Typing of work, thanks for all you have and continue to put into this.
-Seth
April 16th, 2007
Hi!
1) No, I don’t. It’s OK.
2) It’s a pity :( The borders are really essential for my calendar because of the page style…
April 17th, 2007
@Sylvain –
Hmmm – this is a new request but I can see how it might be useful. I’ll see if I can allow for it in v2 which I’m currently developing.
@Seth –
Very strange. If a console.log call was stopping it from running even in Firefox with firebug the the BEA thing must be doing something very weird! I don’t envy you debugging with weird things like that going on! Good luck :)
@Oleg –
1) Cool :)
2) Hopefully v2 of the plugin will avoid this problem…
Thanks for the feedback guys,
Kelvin :)
April 17th, 2007
Thanks for the plugin. One recomendation:
When I open Calender it is open from left and top position 0 ralative to the picture. In some forms this cause a problem. Good choice will be if we can control this with parameters. Sorry for my poor engish.
Regards
Tony
April 20th, 2007
Hi Tony,
v2 of the plugin is very nearly ready and allows you to control exactly where the calendar appears (whilst still providing sensible defaults).
Look out for a beta in the next day or so…
Cheers,
Kelvin :)
April 20th, 2007
Hi kelvin!
This is really very cool plugin, I hope v2 will be even better.
In my recent project I wanted to disable the calendar temporarily but could not find an easy way to do it. It would be good if you would add “disabled” property in v2.
April 24th, 2007
Hi,
You can judge for yourself how good v2 is – I announced the beta on the jQuery list this morning…
Re. the disabled property, that’s a good idea. If the date picker is associated with an input and that input is disabled then the date picker should also become disabled. I’ll look into implementing that,
Thanks,
Kelvin :)
April 24th, 2007
Can we have date block feature. Users shouldn’t be able to pick a date before today’s date.
May 2nd, 2007
Hi MySchizoBuddy,
That is the default behaviour of both the original date picker and the v2 beta – if no startDate is passed then it defaults to today, otherwise you can set the startDate to whatever you like…
Cheers,
Kelvin :)
May 5th, 2007
Hi,
Great plug-in, congratulations. Sorry if I sound like a newbie, but I tried to set a default value (not the start date) and I couldn’t find how. I just want to have an input field reading the date from a database and to have that value as default. I hope you get what I mean ;-)
May 8th, 2007
Hi Jose,
Which version of the plugin are you using? In fact, it shouldn’t matter…
In either version you can simply put a value into the input field and this will become the selected date in the date picker. So on page load use your database to write the date into the “value” attribute of the input field…
Hope that helps,
Kelvin :)
May 8th, 2007
Hi Kelvin,
First of all, nice work! and i dig the photos on your website, gave me some ideas on my next travel adventure.
I am playing around with your Start and End Date datePicker demo (http://kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html) and was wondering.. is it really that neccessary to use so many .js files in order for this to work.
1. jquery-1.1.2.js
2. date.js
3. dimensions.js
4. jquery.datePicker.js
and finally..
5. Page Embedded javascript
All adds up to a fairly hefty call to the server. Forgive me in advance if this is a dumb question but i am fairly new to javascript and over cautious with page download times.
respect!
Declan
May 16th, 2007
Hi Declan,
Thanks for your thoughts – glad you like the plugin :)
If I was deploying the date picker on a production site I would combine date.js, dimensions.js and jquery.datePicker.js (and any other jQuery plugins I was using) into one file and compress it – if possible with gzip on the server or using packer
You can even do this dynamically which means you can keep the files separate for easy development but serve them merged and compressed for optimal end user experience.
When v2 comes out of beta I’ll try to put some recommendations for this approach onto the project page.
Cheers,
Kelvin :)
May 16th, 2007
Hello Kelvin,
great plug-in!
I was wondering if you could add a link at the base of the calendar between the previous/next links that defaults to today’s date? Clicking on it would set the date and jump you back to today, i.e. reset the calendar (in case you are tired of paging through the months)
Another way of combining all of the javascript & CSS files dynamically (using various scenarios) can be found here: http://code.google.com/p/minify/
Keep up the good work!
Cheers.
May 16th, 2007
Hi, I like your v2 plugin.
One thing… I don’t think that removing (_clearCalendar) calendar on each “close” and “month/year change” is a good idea. It is causing plugin reacts slowly. If you would reuse already generated html and just set classes for elements it should be much faster. Give it a try.
Structure of the html generated never changes. Only values and styles.
Example of reusing: ryanair.com – the object is reused also between both instances of calendar – the coding isn’t that nice but…
Another thing i’ve noticed is “bold” isn’t working inside jCalendar class. This applies to your examples as well. I am not sure about cause, I didn’t do any deep examination of this.
One nice feature could be to have “status” if you mouseover the datePicker. See example on ryanair.com.
June 22nd, 2007
Hi,
@Chris – The today button is on the TODO list. And thanks for the info on minify, I’ll look into that properly when I get a chance but it looks good!
@Martin – I have wondered if it would be any quicker to loop over the generated html and change it’s contents, classes and event handlers rather than recreating it each time but I haven’t had a chance to do any tests on it… By the way, the ryanair calendar doesn’t seem to cache the generated HTML at all. It just seems to generate it quicker.
I just did some profiling (in firebug) of my calendar vs. the Ryanair one and mine seems to take approximately twice as long (187ms vs 93ms for flicking three months forward) for most operations. It seems like most of this is in the overhead of using a library rather than native DOM scripting though. And in the time taken to evaluate the hooks that I have added in for the extensibility and reusablitily of the calendar.
There is definitely room for improvement though. Date.addDays seems to be responsible for 25% of the time used to create a calendar – there should definitely be a quicker way to do this!
Re. font-weight=bold not working, I’m guessing this is because the font is set to 10px which doesn’t render a bold version.
Re. the status message, yes – this is something I could easily add (although I’ll want to make sure it doesn’t impact performance when it isn’t used).
Thanks for the feedback. v2 of the date picker is still in a stable beta, I’d like to tweak the performance of it before the complete release,
Cheers,
Kelvin :)
June 23rd, 2007
Hey, thanks for your response… I must admit I was wrong… honestly I wrote that calendar :)) a while ago and one of my ideas was to do caching, however things go really fast in ryanair so i didn’t get chance :) but somehow it got stuck in my mind… ok no more excuses…
Your reactions make perfect sense – RESPECT
June 25th, 2007
Thanks Martin :)
The ryanair calendar is great, I guess I have to sacrifice some of the speed for flexibility but you’ve definitely prodded me into profiling and trying to streamline the plugin when I next get some free time…
Thanks for the feedback,
Kelvin :)
June 26th, 2007
How to disable specific month, ex: when I’m browsing July, and Ausgust need disable, I click next month and I will be redirected to September. Any ideas?
July 3rd, 2007
Hi Linh,
The only way you can currently do it is by disabling all the days in August in the same way as I disable the weekend in this example.
It won’t make the date picker jump over August when you click next month but it will prevent you from being able to select any days in August…
Hope that helps,
Kelvin :)
July 7th, 2007
Thank Kelvin, your response very helpful.
July 8th, 2007
My favourite calendar so far. I would love to see the following:
3 parameters on the create:
1) Allowable date in the past (so 2 months prior to today)
2) the Start Date as it is now (almost certainly always be defaulted to todays date)
3) max date
July 19th, 2007
Thanks Kelvin, I really like this calendar, works well for me.
I was wondering one thing I couldn’t find, is there a way to click on the next month or next year selection and have it scroll through without having to click multiple times?
July 19th, 2007
Hi,
Glad you like the plugin :)
@James – I think you can do everything you are asking for… Did you see the startDate and endDate parameters?
@Mike – I’m not sure I understand you… You mean click next month or next year and the calendar then starts cycling through all of the months?
Cheers,
Kelvin :)
July 19th, 2007
yes Kelvin thats what i was wondering, im pretty new to web programming so not sure if thats even possible. Thanks
July 19th, 2007
Hi love your work, how do I default todays date into the holder box?
July 26th, 2007
Hi wortho,
I’ve added two new examples which show exactly how to do this,
Hope it helps,
Kelvin :)
July 29th, 2007
Firstly, Thank you!
I’m having trouble mixing the Start and End datePicker and having the selected date (the value) show up as selected. It always shows todays date selected by default. As in the simple datePicker today selected example.
Thanks again!
August 1st, 2007
This seems to work. I changed the following:
$(’.date-pick’).datePicker({
createButton:false,
displayClose:true,
clickInput:true,
})
To this:
$(’#start-date’).datePicker({
createButton:false,
displayClose:true,
clickInput:true,
}).val(new Date($(’#start-date’).val()).asString()).trigger(‘change’);
$(’#end-date’).datePicker({
createButton:false,
displayClose:true,
clickInput:true,
}).val(new Date($(’#end-date’).val()).asString()).trigger(‘change’);
and you’ll have to add an if statement to load the portion I changed if your date in input date values are null.
In my situation the page loads with no dates selected and doesn’t display Na/Na/Na. Then you pick some dates and submit the page. Now those values you submitted will be selected if you click on them again.
Maybe there is a prettier way?
August 1st, 2007
Hi theD,
I’m not quite clear what you are trying to do… You want linked start and end date pickers but you also want to be able to pass in a selected date on page load? If you can describe exactly what you are trying to achieve then I’m sure I can supply you with a cleaner way to achieve it,
Cheers,
Kelvin :)
August 7th, 2007
Using Opera 9.2.3, the date picker would not start if it is placed in a blockUI div box. The only thing I am able to trace so far is the “this.ele” in the “display” function is null or an empty object.
August 15th, 2007
Hi Chong,
Can you post an example page showing this problem? Either here or on the jQuery mailing list.
That should help me to debug the problem… Also, does the problem only occur in Opera? Does the contents of the BlockUI div exist when you initialise the datePicker or do you create it after?
Cheers,
Kelvin :)
August 16th, 2007
Thank you so much Oleg Ovchinnikov without knowing you save me with your message dating of Apr 5, 12:01.
November 14th, 2007
Great calendar, simple, no additives…
I only needed to change base css, because the ‘fixed’ width of the table (div.dp-popup) does not allow me to fit in my design, and I was a bit loss until I discover it.
Great work!.. Thanks for Sharing.
November 24th, 2007
Kelvin,
I have an inline datepicker, and when I dpSetSelect an element, I’d like to have its status change immediately on the calendar. Is this possible? It seems to require a rerender, which I’m having difficulty executing properly.
Thanks
Christian
November 28th, 2007
Hi,
@miguelito – Thanks :)
@Christian – This is an issue a couple of people have recently noticed. There is a ticket on it – I will try and fix the problem ASAP and update that ticket,
Thanks,
Kelvin :)
December 10th, 2007
Hello Kelvin,
I am developing a calendar application. Is there a way to add events and display event on mouse over?
March 11th, 2008
Hi Chaitu,
Sorry for the very slow reply!
You can use a renderCallback to control how each cell is rendered and to optionally add custom event handlers.
This example should help – you could bind a mouseover function in the same was as I bind the click function.
Hope that helps,
Kelvin :)
March 20th, 2008
Hi! Great Job! Calendar is exellent, but I have one question. Is there any chance to connect “multiple select” with php or better Mysql base. Thanks for answer Cheers :)
March 23rd, 2008
When setting the date format to this:
Date.format = ‘mm/dd/yy’;
it fills the field with something like this:
04/04/108
Is there a way to get it to use the two-digit date?
Thanks,
JRB
April 4th, 2008
Hi JRB,
Are you definitely using the latest version of all files (including date.js file)? I ran into this issue a while back and thought it was solved… I had to add a Date.fullYearStart variable to the date.js file…
Hope that helps,
Kelvin :)
April 4th, 2008
That was it—the date.js file was old.
Thanks!
April 8th, 2008
Hello Kelvin
one more thank you for such a great plugin.
I’ve been trying to add a onClick event when you:
1. click “prev” / “next”
2. Change the month/year from the drop_downs
It will be great if there is a way to add such event as an option (like the one when you select a specific date).
Thanks for any tip you can give.
April 27th, 2008
Hi Edwin,
Did you see the dpMonthChanged event in the documentation?
That fires when you change month with the next/ previous buttons. For the drop downs do you mean where you use linked dropdowns? In that case you can listen to the native change event on the dropdowns themselves…
Hope that helps,
Kelvin :)
April 27th, 2008
The “change” event is triggered too early on a datepicker’s referenced textfield (when the event handlers are fired, the previous value of the field is read, instead of the new one).
May 7th, 2008
Hi
I can’t get the date picker (date text field and button) on the same line with other elements (e.g. text or text fields). The datepicker always enforces a line break. How can I have the date picker text field on the same line with other elements without having to change code from the datepicker lib? Thanks a lot in advance for advice!
Dom
May 15th, 2008
Hello,
Is there a way to set the end date to today’s date?
Thanks,
Johnie Karr
May 20th, 2008
Hi Kelvin,
Great work on the datepicker. As an FYI to you and to all: if using with a corners (curvycorners) plugin, be reminded to check the order in which the plugins are called. Should be corners before datepicker.
$(”.form_container”).corner();
$(”.date-pick”).datePicker();
-Michael
May 28th, 2008
hi
great picker, but is there a known problem with firefox, as i have set the past date and it works fine with Safari but in Firefox the past date is not set
Cheers
Kevin
June 4th, 2008
Hey guys,
Sorry for the slow reply!
@Ascanio – thanks for the bug report – I’ll look into it when I get a chance.
@Dom – you need to use some css. Try wrapping the date picker input field in a div with a float on it…
@Johnie – yes! Try something like: .datePicker({endDate:new Date().asString()});
@Michael – thanks for the info :)
@Kevin – I haven’t seen this problem. Do you have a URL I can look at to help you debug?
Cheers,
Kelvin :)
June 4th, 2008
i’m testing locally at the moment, it works fine in an html document but i’m using php and it looks like it does not like passing the start date to the other scripts
can it be coded into the relevant place?
kev
June 4th, 2008
Hi Kevin,
It sounds like the problem isn’t related just to the date picker. Does your input have a name attribute as well as an id attribute? I can’t really help any more without seeing the page in question…
Cheers,
Kelvin :)
June 4th, 2008
hi, great script.
Im having a problem when I set up start date it works fine, but if I set Date.format = ‘yyyy-mm-dd’ too, the start date stop working.
It dont let me change select past dates and reformat the date.
Im using this code:
Date.format = ‘yyyy-mm-dd’;
$(function()
{
$(’.date-pick’).datePicker({startDate:’01/01/1996’}).val(new Date().asString()).trigger(‘change’);
});
Thaks
Juanto
July 1st, 2008
Hi Juanto,
If you set the date format then you need to set the startDate in that format… e.g.
Date.format = ‘yyyy-mm-dd’;
$(function()
{
$(’.date-pick’).datePicker({startDate:’1996-01-01’}).val(new Date().asString()).trigger(‘change’);
});
July 2nd, 2008
Hi Kelvin,
Very nice script. However, is it possible for it to display the names of the days and/or months when its displayed in the input field?
I’ve looked through the JS, but my JS skills are somewhat basic and i cant figure it out..
thanks
:)
July 11th, 2008
Hi Nick,
No – that isn’t currently possible as it stands… You should be able to use a three letter version of the month names by setting the date format to e.g. dd mmm yyyy:
Date.format = ‘dd mmm yyyy’;
That is as close as you can get to your request with the plugin as-is…
You could also extend the plugin by using custom listeners as in this example and format the value as you liked in your listener and pass it back to the relevant input.
However, displaying the names of days and months in the input box will probably make the job of the serverside script that you post to harder so I’m not sure I’d suggest it…
Hope that helps,
Kelvin :)
July 19th, 2008
Hi Kelvin,
Thanks for this plugin; it’s very useful. I’m wondering if there’s a simple way to allow picking dates prior to 1970. Any thoughts?
Thanks again.
July 21st, 2008
Hi Kevin,
Thanks for your brilliant code.
I’m having an issue with thickbox on safari. It’s working without thickbox though. But not with the thickbox.
Any chance to have a look?
Thanks
July 24th, 2008
I’ll use your code in my one of app.I’ll give you a credit if your code wins competition
August 13th, 2008
I’m working on project which can not have more than 5 dates selected. It would be great to have the ability to define the max amount of selectMutiple. Is this possible?
August 26th, 2008
If I have a range of dates, how can I default the inital values to either “today” (OK), or the POSTED value (if there is one) for each of the two dates in my form? (Using PHP, BTW)
September 8th, 2008
I am using datePicker and on the basic of selected start and end date i get data from databse.The problem i am facing is,if i dont click on any of two date field and click the subsit button it closes my browser by giving this widnow error in popup “Internet Explorer has encountered a problem and needs to close. We are sorry for the inconvenience.”.If i just click on any of the two date fields then it words well.
Only IE6 gives this error.Other browsers r working perfectly well.
code is
”/>
and javascript code:
Date.firstDayOfWeek = 7;
Date.format = ‘dd/mm/yyyy’;
$(function()
{
$(’.date-pick-start’).datePicker({clickInput:true,startDate:’01/01/2007’,endDate:’’});
$(’.date-pick-start’).dpSetSelected(‘’);
$(’.date-pick-end’).datePicker({clickInput:true,startDate:’01/01/2007’,endDate:’’});
$(’.date-pick-end’).dpSetSelected(‘’);
});
I spend almost 2 hrs bt not gettin any clue.Plz help.Thanks.
September 11th, 2008
I’m trying to solve what seems like a slight bug with Safari. I am trying to have the datepicker window show up when an image field is clicked. It works in IE7 and FF3, but not Safari. Am I doing something wrong or just trying to get it to do something it won’t do?
September 17th, 2008
Hi,
I’m having an issue with the display of the header (ie. October, 2008) at the top of the calender. I’m not at all sure why this is happening. I’ve got it setup so that it appears in the corner of the form when an input is selected. Any help would be appreciated, thanks.
October 9th, 2008
Hi can any body tell me is there any JQuery Datepicker forum.
October 16th, 2008
Hi, A few people asked if you could show dates outside of the current month, i've done this by changing the following in date.js:
this.setHours(0);
to
this.setHours(-8760);
This is exactly a year in hours, so the calendar can now be used to look backwards, but still defautls to today.
Ian
November 5th, 2008
I've been using datepicker with no problems. Now I need another form but this time I need to go back in the calendar. So I inserted the following code and it works on the Mac in Safari. I get the back arrows as expected. But the arrows are grayed out in Mac/Firefox and on the PC in IE6 and Firefox. I wonder what's wrong?
Date.format = 'yyyy-mm-dd';
$(function()
{
$('.date-pick').datePicker({startDate:'01/01/1996'});
});
November 12th, 2008
I just want to thanks you for the splendid job, it has been useful to me have luck!
November 27th, 2008
Hi Kelvin,
Thanks for a great plugin. I ran into the same problem as Santy. There's a bug in IE6 that prevents div "popups" from being correctly positioned above html select elements (dropdowns): if the calendar overlaps a select, the select will cover it. There are two solutions I know of: 1) hide the select when the div is displayed, 2) display the div in an iframe. Has anyone used an iframe with the datepicker?
December 2nd, 2008
Hi Kathy and Santy,
Are you including the bgiframe plugin like in my examples? If you are then the plugin should behave perfectly with IE6. If you are still having problems then please send me a link to the page where you are having difficulties,
Thanks,
Kelvin :)
December 2nd, 2008
Hi Alan Adamson,
You need to pass your startDate in in the same format as you set the date picker to:
Date.format = 'yyyy-mm-dd';
$(function()
{
$('.date-pick').datePicker({startDate:'1996-01-01'});
});
December 2nd, 2008
Hi Ian Norton,
Why not just use the startDate parameter like in this example?
December 2nd, 2008
Hi,
Thanks for this excellent plugin. I'm wondering if there is an easy way to return the number of days between the two dates. I'm using date pickers for start and end dates and want to populate a text field below the pickers with the number of days.
cheers, Tim
December 3rd, 2008
Hi Tim,
I've just added an example which does just that:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEndDuration.html
You may want to change the +1 to a +2 depending if you want the dates to be inclusive or exclusive,
Cheers,
Kelvin :)
December 3rd, 2008
Hi Kevin,
Thanks very much! Exactly what I need...
Thanks for the fast response and example. Off to implement it :)
Cheers, Tim
December 3rd, 2008
hi,
im working with asp classic as i put the date picker to my web its not working i follow all the instructions i will use the date picker to my web reservation pls heal me on how this date picker work im using dreawmwever mx
December 4th, 2008
Hi Blair,
I'm afraid you'll need to be a bit more specific if you need help. Probably best if you include a link to the page which isn't working and I can take a look at it,
Cheers,
Kelvin :)
December 4th, 2008
Hi Kelvin.
I met jquery-date-picker around one year ago and I've used it without problems two or three times since then. The problem now is that I want to include scriptculous lightbox in a page so to display images and I got shocked when I realized that the date picker was not working any more. As soon as I removed the scriptaculous and prototype calls in the page, the date picker started to work again without any problem. Did you know this side effect? Have you got any idea on how to solve it?
Thanks in advance and best wishes.
December 7th, 2008
Hi JMLopez,
The date picker should work fine with jQuery in noconflict mode:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
So everything should work fine if you call:
jQuery.noConflict();
jQuery('YOUR_SELECTOR').datePicker(YOUR_SETTINGS);
If you have any problems with that then please send me a URL demonstrating the problem and I'll try to help,
Cheers,
Kelvin :)
December 8th, 2008
Hi Kelvin luck, You plugin is wonderful, only one question, If is posible to do a range selection dates, with 3 calendars or more, like the example of this page that is other plugin.
http://www.eyecon.ro/datepicker/
see the example:
"Flat mode, range selection, 3 calendars."
December 15th, 2008
Hi Lucks,
Glad you like the plugin :)
I've just put together an example which shows you how you can use the methods and events exposed by the plugin to build something similar to what you are looking for: multi month date picker example.
It is just the first step to what you want but hopefully the approach there will give you an idea for how to proceed. When I have some more spare time I'll look into putting together a plugin to act on top of the date picker plugin and create the functionality you desire.
Make sure you clear your cache and get the latest jquery.datePicker.js from my site because I also fixed a couple of bugs related to refreshing the contents of inline date pickers...
Cheers,
Kelvin :)
December 16th, 2008
Hi Kelvin,
Is there anyway I can get a list of the days within a selected date range? I want to check whether they fall within ranges in my database.
Thanks!
December 24th, 2008
Hi Kelvin,
Thanks for the plugin. Like JMLopez, above, I am having trouble using this with Scriptaculous. I have applied to noConflict setting and it seems to work fine with just the prototype library. However, when adding Scriptaculous.js, the datePicker throws a javascript error (target.getAttribute is not defined).
Just wondering if you have it working with Scriptaculous and if you could send an example of the JS file inclusion. I've tried a few variations but haven't gotten it to work yet. Here is what I currently have in my HEAD section:
jQuery.noConflict();
December 28th, 2008
Hi Tim,
I'm not quite sure of your setup but I put together a new example which may help:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEndListDays.html
Cheers,
Kelvin :)
December 28th, 2008
Hi keldoyle,
Unfortunately most of your code got snipped out by wordpress... What versions of jQuery and scriptalicious are you using? I know that there was previously problems because scriptalicious adds properties to built in objects which breaks for..in loops and stuff... I'm not sure if these have been resolved.
If you are still having problems with the latest releases of jQuery and Scriptalicious please raise an issue on the date picker googlecode page with an example URL,
Thanks,
Kelvin :)
December 28th, 2008
Kelvin,
I got a small issue with my configuration and the use of the datePicker.
I'm using an English OS/Browser and developing a Dutch website; This caused the date names to appear in English.
Therefor I extended the code:
var day;
if ($.dpText.TEXT_WEEKDAYS)
day = $.dpText.TEXT_WEEKDAYS[weekday];
else
day = Date.dayNames[weekday];
When the TEXT_WEEKDAYS is declared in the localization file the names appear in Dutch.
Thanks,
Sven
January 1st, 2009
Hi Sven,
Are you using my date picker? The variable names don't look familiar to me...
Cheers,
Kelvin :)
January 1st, 2009
How may i change the date format(mm/dd/yyyy) to yyyy-mm-dd
i tried with these codes
Date.format = 'yyyy-mm-dd';
$(function(){ $('input.date-pick').datePicker({startDate:'1996-01-01'}); });
Date 1:
error
Date.fromString is not a function
http://127.0.0.1:8000/static_media/js/jquery.datePicker.js
Line 556
January 2nd, 2009
Kelvin,
yes, I do (or your site is hacked :-).
I added the TEXT_WEEKDAYS variable to the localization array (found at http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerLocalised.html).
The code above is my own and is added after line 61 of version with release stamp 2008-12-17 04:40:18.
Or someone else wrote another great control :-)
Sven
January 2nd, 2009
HI Praveen,
Did you include the date.js file as well as jquery.datePicker.js?
Cheers,
Kelvin :)
January 2nd, 2009
Hi Sven,
Ahh - I see the confusion... I should have shown how to change the day names on that example as well... You can do it without editting the plugin like so:
Date.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
Date.abbrDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
(Obviously using the Dutch words rather than the English ones). These variables are set in date.js but you can override them in your script ...
Sorry for the confusion and thanks!
Kelvin :)
January 2nd, 2009
Hi,
I using JQuery Datepicker control,I downloaded the code.but I want to
remove the unneccessary code from javascript files.
My Rquirement is
1)When i click On Image DatePicker opened
2)select the date keep in Input textbox
3)Next,prev,clear close
Pls give me suggestions what are functions not useful for me in Jquery.js
January 5th, 2009
Hi Kelvin,
Quick question regarding the disabling and enabling the dates. Base on some conditions, I m disabling all the dates except Mondays. Here is the function I used,
function mondayonly(){
$(function(){
$('.date-pick')
.datePicker(
{
createButton:false,
renderCallback:function($td, thisDate, month, year)
{
if (thisDate.getDay() != 1) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
}
)
.bind('click',
function(){
$(this).dpDisplay();
this.blur();
return false;
}
)
.bind('dateSelected',
function(e, selectedDate, $td){}
);
});
}
I am calling the is mondayonly() function when I need to disable other dates other than mondays. This works great.
If I want to enable all the dates based on other conditions, it is not working. here is the code...
$td.addClass('weekday');
$td.addClass('enabled');
Do I need to tweek the code more????
advance thanks for ur help.
-Suds
January 6th, 2009
Hi Suds,
It would be easier to help with a URL to the page in question... My guess is something like the following may work:
renderCallback:function($td, thisDate, month, year)
{
if (whateverYourConditionIs && thisDate.getDay() != 1) {
$td.addClass('disabled');
}
}
the renderCallback is called whenever the calendar is drawn (e.g. when it is opened or when the month is changed) so as long as "whateverYourConditionIs" evaluates to true when you want mondays disabled and false the rest of the time then this should work... You don't need to add the weekend class - you can just apply css styles to the disabled class to make it look how you like...
Hope that helps,
Kelvin :)
January 6th, 2009
Thanks Kelvin.
My page is like this. A drop down which contains 2 values ie. Daily and Weekly. If I select weekly then I ve to disable all the dates other than Monday...the following code is working fine for that
renderCallback:function($td, thisDate, month, year) {
if (status == 'W' && thisDate.getDay() != 1) {
$td.addClass('disabled');
}
}
Above code disables all the dates other than mondays...thats good.
Now If I select Daily in the dropdown, I need to enable all the dates.
But the following code doesnt enable all the dates
renderCallback:function($td, thisDate, month, year) {
if (status == 'W' && thisDate.getDay() != 1) {
$td.addClass('enabled');
}
}
still all the dates except monday are disabled. What should I do for this?
thanks in advance...
January 8th, 2009
Thanks Kelvin.
My page is like this. A drop down which contains 2 values ie. Daily and Weekly. If I select weekly then I ve to disable all the dates other than Monday...the following code is working fine for that
renderCallback:function($td, thisDate, month, year) {
if (status == 'W' && thisDate.getDay() != 1) {
$td.addClass('disabled');
}
}
Above code disables all the dates other than mondays...thats good.
Now If I select Daily in the dropdown, I need to enable all the dates.
But the following code doesnt enable all the dates
renderCallback:function($td, thisDate, month, year) {
if (status == 'D') {
$td.addClass('enabled');
}
}
still all the dates except monday are disabled. What should I do for this?
thanks in advance...
January 8th, 2009
Sorry by mistake I entered twice. Please ignore the first one...
January 8th, 2009
Hi Suds,
You should only need one renderCallback which should be the first one... That will add a class of disabled when the status is W and the day isn't monday. If the status changes to D and the calendar is redrawn then the disabled class won't be added and all dates will be selectable.
Is the calendar inline or a popup? Are you triggering a redraw when the the select (and the value of status) is changed?
If you are still having problems please open an issue on the googlecode page with an example URL and I'll try to help further,
Cheers,
Kelvin :)
January 8th, 2009
Is there a way to make the calendar week start on Sunday instead of Monday?
February 11th, 2009
Hi Blake,
This example should help:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDateFormat.html
Cheers,
Kelvin :)
February 11th, 2009
Fantastic plugin. I have a question regarding the "disabling of days". I want to disable all Sun, Mon, Wed dates so that the user can only pick a Tues, Thurs or Sat. Is that currently possible? Thanks
-TJ
February 15th, 2009
Hi TJ,
Yeah, it's totally possible with a renderCallback. Use this example as your starting point:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html
But rather than thisDate.isWeekend() say something like:
var day = thisDate.getDay();
if (day == 0 || day == 1 || day ==3) {
$td.addClass('disabled');
}
Hope that helps,
Kelvin :)
February 15th, 2009
Absolutely perfect. Thank you for your help.
-TJ
February 16th, 2009
Hi Kevin,
Thanks for a great plugin. I'm new to JQuery but your plugin is definitely proving a timesaver. :)
Regarding accessibility, are there any plans to add keyboard access? I note that some of the other datepickers out there do support keyboard access (in conjunction with the CTRL modifier).
It's not strictly necessary, as the calendar is really a shortcut for using the select elements, but it would be good to offer both mouse and keyboard users with identical functionality if at all possible.
Thanks,
Dan
February 18th, 2009
Hi Dan,
Keyboard access would indeed be nice to have but I work on the date picker in my meagre spare time and so I probably won't get around to implementing it anytime soon (if at all).
People are welcome to provide a patch which adds it or to sponsor it's development or maybe I'll somehow end up with lots of spare time but unless any of those happen it will stay as a nice to have in the future feature,
Kelvin :)
February 18th, 2009
Sure, I completely understand/sympathise/feel your pain ;-).
I'm just a JQuery beginner, but when/if my JQuery skills improve to the level of yours I'll look at modifying your code to achieve this.
Cheers,
Dan
February 19th, 2009
Hi,
You done wonder full job.....
i have used you calendar in my site, i want little change that is, when i select date1 ..... date 2 should allow user to select after date1.
means date1 i have selected feb20th2009 and when i try to click on date2 it should accept from feb21st2009.
February 20th, 2009
Hi Kelvin,
can you help me on the issue that i specified ....
i m calling a js function when ever i will change the date1 from there i m assigning date2 start date.
but it's not working properly.
Bye...
February 21st, 2009
Hey, Kelvin
I have a problem : how to change the format of the date ?
This plugin is so cool ! Thank you so much !
Ken
February 21st, 2009
Hi Sri,
Did you see this example - it sounds like what you are trying to do:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html
Cheers,
Kelvin :)
February 21st, 2009
Hi Ken,
Just set Date.format like in this example:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDateFormat.html
Hope that helps,
Kelvin :)
February 21st, 2009
First off, awesome plugin. It's been great to use.
I just started messing with the MutliMonth plugin with multiple days able to be selected and was wondering how, on submit of a button, I could return all the dates that are currently selected in the MutliMonth calendar?
I tried dpGetSelected() and it always returns NULL if pointing to a MultiMonth calendar.
February 21st, 2009
Hi Jason,
Glad you like the plugin :)
I haven't implemented the dpGetSelected method on the multi month plugin. It would be great if you could raise an issue on the googlecode page ( http://code.google.com/p/jquery-datepicker/issues/ ) and I will try to implement it soon.
In the meantime you can listen for the "dateSelected" event to keep track of which dates are selected.
Cheers,
Kelvin :)
February 21st, 2009
Kevin:
Your plug in is awsome. I have been testing it and it works great and I look forward tio using it in the future.
But, for my current project I need a slight variation which I am hoping you can tell me if it is possible.
I need one calendar icon to populate three (3) fields, but the twist is these fields are not pull downs but text fields.
I have toyed with using http://jqueryui.com/demos/datepicker/#alt-field, but have been unsuccesful so far in getting that third field to populate.
Any assistance or guidance you could provide would be greatly appreciated.
February 26th, 2009
Hi Randy,
I think you may be confusing my datepicker with the jQuery UI one. The link you give above is to the jQuery UI datepicker (which was created later than mine but confusingly enough uses the same name).
If you are using my date picker you should be able to easily adapt this example: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html - just instead of trying to set the selectedIndex you should use the .val() method.
Hope that helps,
Kelvin :)
February 26th, 2009
Kelvin:
Its not that I was confusing the datepickers, I was just not clear enough (sorry) witrh my post.
The reason I brought up the other date picker is because I was able to get that to at least fill in two field.
Regarding your date picker, I assume you are reffering to these sections:
var updateSelects = function (selectedDate)
{
selectedDate = new Date(selectedDate);
var d = selectedDate.getDate();
var m = selectedDate.getMonth();
var y = selectedDate.getFullYear();
($('#d')[0]).selectedIndex = d - 1;
($('#m')[0]).selectedIndex = m;
($('#y')[0]).selectedIndex = y - 2005;
}
// default the position of the selects to today
var today = new Date();
($('#d')[0]).selectedIndex = today.getDate() - 1;
($('#m')[0]).selectedIndex = today.getMonth();
($('#y')[0]).selectedIndex = today.getFullYear() - 2005;
And modifying in this way:
var updateSelects = function (selectedDate)
{
selectedDate = new Date(selectedDate);
var d = selectedDate.getDate();
var m = selectedDate.getMonth();
var y = selectedDate.getFullYear();
($('#d')[0]).val() = d;
($('#m')[0]).val() = m;
($('#y')[0]).val() = y;
}
var today = new Date();
($('#d')[0]).val() = today.getDate();
($('#m')[0]).val() = today.getMonth();
($('#y')[0]).val() = today.getFullYear();
Please let me know if this is the right path to head down.
Thanks.
February 27th, 2009
Hi Randy,
Instead of:
($('#d')[0]).val() = d;
Try:
$('#d').val(d);
etc etc. (presuming that your "day" text input field has an id of "d".
Hope that helps,
Kelvin :)
February 27th, 2009
Kelvin:
Changing this:
var updateSelects = function (selectedDate)
{
selectedDate = new Date(selectedDate);
var d = selectedDate.getDate();
var m = selectedDate.getMonth();
var y = selectedDate.getFullYear();
$('#d').val(d);
$('#m').val(m);
$('#y').val(y);
}
With these fields:
Works great.
Now I have what I think are two (final) easy questions::
(1) When I hit select Date, the fields automatically fill in "NaN" until I actually select a date. When I select a date, everything then functionas as expected and fills in the fields.
(2) The month field is 1 off. So October 10 is listed as 9 and so on and so on ...
Thanks.
February 27th, 2009
I should ahve added:
That I am getting this error message which may be tied to the NaN issue:
Line:26
Char:10976
Error 'guid' is null or not an object
February 27th, 2009
Hi Kelvin
Sure I'm doing something stupid, but I'm trying to find a sneaky way of turning the tds into links. It's been working fine, but I can't find a way to write code which excludes the disabled dates. Something like this...
renderCallback:function($td, thisDate, month, year)
{
if ($td.is('disabled')) {
$td.html($td.html());
}
else {
$td.html('' + $td.html() + '');
}
};
... but that doesn't work.
Any ideas?
Thanks for all the good work.
Chris
March 1st, 2009
Hi,
I have an inline datepicker with selection of multiple dates. I want to get out a list of the dates picked whenever a user clicks at a date(adds or removes selection).
I've tried this, but I only get the last date click at(even if the click removes the date from selection):
$(function()
{
$('.calendar')
.datePicker({inline:true,
selectMultiple:true,
numSelectable:5
})
.bind(
'dateSelected',
function(e, selectedDates)
{
console.log(selectedDates);
}
) ;
});
March 2nd, 2009
Hi,
I have an inline datepicker with selection of multiple dates. I want to get out a list of the dates picked whenever a user clicks at a date(adds or removes selection).
I've tried this, but I only get the last date click at(even if the click removes the date from selection):
$(function()
{
$('.calendar')
.datePicker({inline:true,
selectMultiple:true,
numSelectable:5
})
.bind(
'dateSelected',
function(e, selectedDates)
{
console.log(selectedDates);
}
);
});
How can I do this?
March 2nd, 2009
Hi Randy,
For problem 1 try wrapping it all in a check for a valid date... For problem 2 just add one to the month (months in JS are zero based). So you'll have something like:
var updateSelects = function (selectedDate)
{
selectedDate = new Date(selectedDate);
var d = selectedDate.getDate();
if (d) {
var m = selectedDate.getMonth() + 1;
var y = selectedDate.getFullYear();
$('#d').val(d);
$('#m').val(m);
$('#y').val(y);
}
}
Hope that helps,
Kelvin :)
March 3rd, 2009
Hi Laplandes,
Looks like my blog cut some of your code off... Rather than trying to wrap the contents of the TD in a link, how about adding a click event listener to it which goes somewhere? So in the renderCallback do something like:
$td.bind('click', function() { location.href='yourLink.html'; return false; });
Hope that helps,
Kelvin :)
March 3rd, 2009
Hi Anders,
Did you see this example?
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiple.html
The dateSelected event only tells you about the date which was just un/selected... You should call dpGetSelected (or wait for the dpClosed event) to get the complete list of selected dates,
Cheers,
Kelvin :)
March 3rd, 2009
Hi Kevin,
your produce is awesome. I want to display month and year drop downs like in http://jqueryui.com/demos/datepicker/#dropdown-month-year. How can I do it.
Cheers,
Dharshana
March 10th, 2009
Hi Dharshana,
Glad you like it :) Unfortunately you can't currently display the month and year as dropdowns like in the example you link to using my datepicker. Please file an enhancement request on the googlecode issues list ( http://code.google.com/p/jquery-datepicker/issues/list ) and I will try to get to it at some point,
Thanks,
Kelvin :)
March 12th, 2009
hi,
thanks for this usefull script. and sorry about my bad english. i use this script in a https site but the script (i think) set cookie from your site like http://www.kelvinluck.com/mint/?record&key=30384b6959564f6738346a3939367661587a4a716e333231&referer=&resource=https%3A//www.asdasd.com.tr/tr/index.php&resource_title=asdasdasd%21&resource_title_encoded=0&resolution=1440x900&flash_version=10&eatscookies=no&1237388344940
when using ie or firefox the web site warning secure and non-secure items. what can i do for this problem?
thanks a lot
March 18th, 2009
Hi Ugur,
You should not include the mint script on your page. That is just my stats tracking program for this blog and isn't necessary for the date picker.
Cheers,
Kelvin :)
March 18th, 2009
how can do that?
thanks again...
March 19th, 2009
Just don't put the [script type="text/javascript" src="/mint/?js"][/script] on your page!
March 19th, 2009
Hi, whilst your date plugin does work. There is a bug/issue.
Regarding "datePicker into selects".
Lets say you want to start your month at March (this month), this has the value of 3 (as its the 3rd month) and then the rest of the months are shown.
The problem is that your date picker works on arrays, it does not work on what the actual value of the month is, so consquently I'm having to subtract days, and sometimes even months just to get it get the right month.
In addition, lets say you already have dates/months/years inside your select box -- sometimes the date picker will default to another date without any reason.
Please fix the date picker so that I can make the month start any month I like, without me having to hack apart the way you handle months in your arrays.
March 19th, 2009
Hi Ad,
What you describe isn't a bug or an issue with the date picker. The date picker is the code in jquery.datePicker.js, the examples are just examples of ways you can use the date picker. Feel free to use the code in the examples as a starting point to build exactly what you need for your given situation... I can't write every page that anyone may want but the examples are meant to show people how flexible the code in the date picker is.
That said, I've just updated that particular example to a more elegant method of updating the selects.
Re. "sometimes the date picker will default to another date without any reason", on page load there is code in my example to default the date picker to today's date - you can remove that code on your page if you like...
Hope that helps,
Kelvin.
March 19th, 2009
Hi Kelvin, good script - sadly does not work for me in firefox or IE when putting on my site - the calendar does not appear?
http://www.blackdogsquare-design.co.uk/CLIENTS/tt/spain-apartment-rentals.htm
Any ideas what I have done?
Cheers,
Pete
March 23rd, 2009
HI Pete,
I'd suggest installing and using Firebug and testing your page. When I did that I could instantly see two problems in the net panel:
* The datePicker.css stylesheet isn't being loaded correctly - did you put it in the right place and reference it correctly?
* You are trying to link to /mint/?js - you don't need to include the link to this...
Maybe fixing those will make the date picker work?
Cheers,
Kelvin :)
March 23rd, 2009
Hi Kevin,
I'm using your jQuery datepicker for a website that I'm currently building. The website has multiple languages, such as Spanish and French e.g.
I'm trying to use localization, but something must be wrong with my code...
I'm including the right js file (e.g. date_fr.js) with the help of PHP, based on the language user is currently using to see the site.
But...Month names still remains the same....in english...
Do I need to call some other function/script/geek stuff?
Cheers,
Laura
April 10th, 2009
Hi Laura,
I don't know why it doesn't work. Do you have an example URL I can look at?
Cheers,
Kelvin :)
April 10th, 2009
Hi Nick,
Im trying to get the day name (monday, tuesday, etc) from the date ive selected into the input field with this format [31/12/2008,monday].
Do you know how to achieve this? im new at jQuery,
Thanks
Yun
April 12th, 2009
Sorry, i mean, Hi Kelvin :P
Im trying to get the day name (monday, tuesday, etc) from the date ive selected into the input field with this format [31/12/2008,monday].
Do you know how to achieve this? im new at jQuery,
Thanks
Yun
April 12th, 2009
Hi Kevin,
I've figured out what's the problem with my code: I'm using sIFR within my website and its javascript file is "fighting" with yours. Don't know why, but the current month text is overwritten in some way.
I've "googled" a bit but didn't find a solution: any ideas?!
Thanks for your help,
cheers
Laura
April 14th, 2009
Hi Yun,
Sorry, you can't put the day into the input field with the date. You could put it into a different input field by binding a listener to dateSelected event and using date.getDay() inside the listener.
Hi Laura,
Does sFIR automatically try to change all h2 elements into graphics? Is there some way you can restrict which h2s get replaced.
Hope that helps,
Kelvin :)
April 14th, 2009
You are my sunshine, my only sunshine!!!!
I've commented the default SIFR rewrite rule for h2 elements and it works fine now.
Thanks Kevin, nice job
Laura
April 14th, 2009
Great DatePicker!
I want to pass a list of dates to disable (gray out and disable), and a list of dates to highlight (enabled, and hightlighted with a bright happy color.). Is there built in functionality to do this?
My javascript is pretty crusty and I can spend hours and days trying to blunder my way along.
Help please?
I am most grateful.
Steveoh
April 14th, 2009
@Laura - sweet :)
@ Steveoh - you need to use a renderCallback like in this example:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html
Cheers,
Kelvin :)
April 14th, 2009
Thanks, Kevin. I tried http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html and it functions as designed for the weekend, but I need to pass a list of days, not just a weekend to disable and or highlight.
days disabled or not available:
4/14/2009,
4/17/ 2009,
4/23/ 2009,
4/27/ 2009,
5/01/ 2009,
5/13/2009
days with a special color/highlight
4/15/2009,
4/1/ 2009,
4/24/ 2009,
4/27/ 2009,
5/03/ 2009,
5/15/2009
Does this make sense? Sorry for all the hand holding.
steveoh
April 14th, 2009
Hi all,
Just to share what I have achieved to get Day (Monday->Sunday) from selected date in the calendar.
$(function()
{
$('.turn-me-into-datepicker')
.datePicker({inline:true})
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
var mydater = selectedDate.getDay();
switch(mydater){
case 1:
var myDay = "Monday";
break;
case 2:
var myDay = "Tuesday";
break;
case 3:
var myDay = "Wednesday";
break;
case 4:
var myDay = "Thursday";
break;
case 5:
var myDay = "Friday";
case 6:
var myDay = "Saturday";
break;
case 7:
var myDay = "Sunday";
break;
default:
}
document.getElementById("txtHint0").innerHTML=myDay+"";
}
).val(new Date().asString()).trigger('change');
});
"txtHint0" is a tag, (). However you can try to put it into input field () or () tag.
Refer to :
Calendar example from : http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/inlineDatePicker.html
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/documentation.html
- under the title : renderCalendar( Object s ) returns jQuery.
Hope we all can benefit from it.
Regards,
Yun
April 14th, 2009
"txtHint0" is a tag, ( ).
However you can try to put it into input field () or ( ) tag.
April 14th, 2009
Hi,
@ Steveoh - You need to write code inside the renderCallback to do what you want. My example code just highlights weekends but you should be able to adjust it to your needs... Here is another example of a renderCallback which effects certain dates:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html
@Yun - Thanks for the example code. Hopefully that will help other people who are trying to do the same as you.
Hope that helps,
Kelvin :)
April 14th, 2009
Sorry, a little edit for my code, silly me. Sunday = 0 not 7 in selectedDate.getDay().
var mydater = selectedDate.getDay();
switch(mydater){
case 0:
var myDay = "Sunday";
break;
case 1:
var myDay = "Monday";
break;
case 2:
var myDay = "Tuesday";
break;
case 3:
var myDay = "Wednesday";
break;
case 4:
var myDay = "Thursday";
break;
case 5:
var myDay = "Friday";
break;
case 6:
var myDay = "Saturday";
break;
default:
}
April 14th, 2009
Hi Kelvin,
I want to do something fairly simple with the start and end dates but can't work out how to write the logic!
I want to literally only enable a start date of todays date +1 and an end date of todays date +30. So only 30 days are clickable excluding the next day. Is this possible?
By the way it's awesome work you've done on this!
Thanks in advance - Si
April 24th, 2009
Hi Kelvin,
I 'm using your datePicker in my application, its awesome.
I have a requirement as follows:
a. startDate ranges between past and current date.
b. endDate ranges between the selected startDate and future date.
I'm not able to perform this operation.
Please help me in knowing this changes.
Thanks in advance
Sree
April 24th, 2009
when i select the first date from the date picker date is selected but at that time i'll assign first date to second date picker box the date picker doesn't select that focused value which came from first date picker. can you help me plz.
$(function()
{
$('.date-pick')
.datePicker()
.bind(
'focus',
function()
{
$(this).dpDisplay();
}
)
});
Date 1:
Date 2:
April 24th, 2009
META content="MSHTML 6.00.5730.13" name=GENERATOR>/HEAD>
BODY>
DIV id=container>
FORM id=chooseDateForm name=chooseDateForm action="#">
LABEL for=date1>Date 1:
LABEL for=date2>Date 2: <INPUT class=date-pick id=date2
name=date2/////////
April 24th, 2009
I have a web app where every day the user needs to logs their hours. On the calendar, I want to highlight in red, the days which haven't had any data entered yet.
April 26th, 2009
Hi Kelvin,
I used your demo : Start and end date pickers.
I have two requirements as follows:
a. startDate ranges between past and current date.
b. endDate ranges between the selected startDate and future date.
I tried using $('.date-pick').datePicker({startDate:'01/01/2000' , endDate: '31/12/2999'}).
For the first time, dates are enabled till '31/12/2999' for 'Start-Date' field but when i click next time after selecting 'endDate', date are disabled after 'current Date' for the 'Start-Date' field.
When i set the 'endDate' to 'currentDate' , dates after 'currentDate' is not enabled. As the 'endDate' is set while loading, the dates are enabled after 'currentDate'. How can i implement this logic in jquery?
Please help me in solving this issue.
Thanks in advance.
Sree
April 26th, 2009
Hi Kevin,
Great job you done with this date Picker, and it proved very useful.
There is just one feature I can't find : the ability to select the same date multiple times.
Ex : in the form http://www.club-leonberg.fr/en/formulaires.php?act=expo, field Date of birth.
Each time you register a dog, the input value is reset to "" but the datePicker still has the selected date in memory. Thus, it is impossible to register 2 dogs in row with the same date of birth.
I would like either to clear the datePickers's memories, or to enable it to have the same date selected multiple times. Is there any simple way to do this ?
Best regards,
Christophe
April 27th, 2009
Hi everyone!
@Si - Yes - that's definitely possible. Try something like (untested but should give you the idea):
var start = (new Date()).asString();
var end = (new Date()).addDays(30).asString();
$('SELECTOR').datePicker({startDate:start, endDate:end});
@Sree - I'm not sure I quite understand your needs. Did you try with the code from this example: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html ?
@Arvid - I think this may be a bug I recently fixed. Please grab the latest JS file from my site and try again.
@Drew - you will need to use a custom renderCallback to do this:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html
@Christophe - I think I recently fixed this problem. Please grab the latest JS file and tell me if you are still having problems.
Hope that helps,
Kelvin :)
April 29th, 2009
Hi Kelvin,
Thanks so much for your work.
Unfortunately the inline multiple month datepicker
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiMonth3.html
does not work in IE (I have tried IE 6 and IE 7). The popup version works.
What can I do about it?
Cheers Tom
April 29th, 2009
Hi Kevin,
I think it's a great thing, the datepicker you created
There is only one downside
Y don't understand how the functions on your demo pages
work.
It seems everybody here has some basic understanding how too configure
it, but Y have none.
Maybe, I should buy a book later on
For now, I just need too understand how those functions are supposed too work, because Y need the mouseover and pastdates too work.
If it is not too much to ask, please
Regards, Richard
April 30th, 2009
Hi there !!! Great job with the datepicker !!! Thanks for it !!!
I have a problem though; I'm trying to use it in IE 7 and it doesn't open at proper position, and it doesn't show correctly the styles ...
Is it a known bug ?? Where can I find a peak for the solution ??
Thanks again !!!
May 2nd, 2009
Hi there,
if anybody needs a fix for the IE-bug, just click hier:
http://code.google.com/p/jquery-datepicker/issues/detail?id=73
Cheers
May 2nd, 2009
Hi,
@Tom - thanks for the help - the latest files on my site and svn now include the fix :)
@Richard - sorry, I don't know how to help you. You should look at the example which is most similar to what you are trying to achieve and copy the code and then play with it to achieve what you want. If you need help figuring out basic javascript and jQuery stuff then have a look at sites like http://www.learningjquery.com/
@Lucas - there are no known issues with the date picker and IE7... It seems to work for me... Do you have any problems with the examples on my site?
Cheers,
Kelvin :)
May 2nd, 2009
@Kelvin, thanks.
Actually no, I'm not having troubles with the examples, even on my localhost ...
So I'm wondering if the problem is my existing .css ...
Thanks a lot for the reply !!!
One little tip for me; can you post me ALL the .js and .css that must be included ??
Thanks again !!! xDD
May 3rd, 2009
Hi Lucas,
The JS and CSS you need is linked at the top of the demo page:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
For the popup calendar you need some additional CSS - e.g. see "PageCSS" on this example:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html
That was because I thought that people would be more likely to want to make this CSS site specific and because it also requires an image (the calendar icon).
Hope that helps,
Kelvin :)
May 3rd, 2009
Hi Kelvin,
I am trying to modify an existing jquery date picker on a page which as been inserted by my CMS (drupal).
I was hoping to add a bit of my own code to filter out particular days from the calendar by using the renderCallback function, but i'm not having any luck.
My code as it stands is the following:
$("#edit-delivery-date-datepicker-popup-0").settings.renderCallback = function($td, thisDate, month, year) {
if ($td.is('.today')) {
$td.addClass('disabled');
}
}
Am i on the right track here?
May 6th, 2009
Hi Kelvin,
Great job on datepicker! :)
I have a requirement where in,
The date range wud be from a past date to today's date.
To set the past date, I can use the dpSetStartDate and hardcode the past date.
For today's date, I wud not want to hard code it in dpSetEndDate.
Is there anyway I can specify todays/sys date in dpSetEndDate?
Thanks!
May 7th, 2009
Kudos on the plugin. Works great!
I would like to show the pay period when a user hovers over a particular date. i.e. I want to highlight the start to the end of the pay period.
I have the javascript code that calculates the pay period start and end based on a given date. How can I work my way back up the DOM tree to assign the appropriate class to each ?
May 8th, 2009
Hi Kevin,
You've made a really nice calendar feature.
However, your calendar starts on Monday and Ends on Sunday. The standard for calendars is to Start on Sunday and End on Saturday. This way your calendar headings do not have "S", "S" at the end.
ie( S,M,T,W,T,F,S)
Is there any predefined selection so that the date picker can display this way?
May 15th, 2009
Please ignore my comment, I found that you have the ability to adjust it via local by setting the Date.firstDayOfWeek
Tks!
May 15th, 2009
Hi All,
@Tim - you are on the right track with the renderCallback but you can't set it dynamically like that. Instead pass it in when you initialise the date picker e.g.
$("#edit-delivery-date-datepicker-popup-0").datePicker(
{
renderCallback : function($td, thisDate, month, year)
{
if ($td.is('.today')) {
$td.addClass('disabled');
}
}
}
);
Obviously you can change the is('.today') to be a more complex rule to update certain dates (see this example: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHolidays.html )
@Meg - Yes - to pass todays date into the datePicker use:
(new Date()).asString()
@Jason - See the renderCallback in this example: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerLimitAvailableDatesAjax2.html - it adds a hover class to a set of dates, you should be able to use it as a starting point for your needs.
@Blaine - Glad you figured it out :)
May 15th, 2009
great work Kelvin...
however, can we have more than one pre-selected date??
May 22nd, 2009
Kelvin,
I truly appreciate your work in creating a really nice piece of calendar code. If only I knew enough JavaScript to fully understand it!
My question is this: can I use the datePickerMultiMonth plugin in combination with the dpSetStartDate and dpSetEndDate functions of your base script?
I'm currently using your Start/End date example, which is perfect for my application, on this page:
http://www.coltranch.com/ReservationsAndBookings.php (hit continue button)
I'd love to add multiple month display without losing that great Start/End effect:
http://www.coltranch.com/ReservationsAndBookingsTest.php
Is this currently possible?
June 11th, 2009
Hi Guys,
Sorry for the slow replies.
@Kumar - did you try with dpSetSelected?
@Michael - please see the discussion on this issue: http://code.google.com/p/jquery-datepicker/issues/detail?id=79 - basically the functionality you need isn't all in the plugin yet but the code in that issue should allow you to add it. I'll be adding it into the plugin when I next have some time to work on it,
Hope that helps,
Kelvin :)
June 12th, 2009
Thank you Kelvin for this tool.
I managed to get it working in php with the help of the demo code.
I am thinking of implementing this with php/ajax, whereby the contents with a date field is being read from a database and shown on the web in a 'div' tag via the getHTTPObject() function. I will like to use the datepicker for this date field.
There is a mainpage.php file, a script.js file where the getHTTPObject() function resides and a getdata.php file where contents are pulled from database to be shown.
Putting the datepicker.js and datepicer.css in mainpage.php, I dont seems to be able to trigger or get the popup datepicker shown when a input text for a date resides in the getdata.php file. But if the input text for the date resides in the mainpage.php file, then the datepicker works.
But I really need the input text for date to be in the getdata.php file.
What should i do to get it working. Apprecaite your help.
My issue sounds like that of Jud B. date 13th Nov 2006 but I have no idea of how she might get it resolved.
June 17th, 2009
hi kelvin,
can we use the datepicker as a full calender which will show one full year and will not be an overload to the browser? I tried this using the 'numMonths' field to 12. Everything works fine except that my browser hangs for sometime while the script executes. I dont think this is my system problem as I have a system of 2GB memory and I use firefox 3.0.
Appreciate your help.
June 23rd, 2009
great post,
Thank you Kelvin for this tool.
June 25th, 2009
Hello Kelvin,
This is a very basic question, but non js users will find the answer useful.
I spent 3 hours looking for a solution online, with no luck, this is why I come to disturb you.
The question is: how do I pass the date field parameter to a php form?
This the form
on the page
http://www.apartmentoski.com/client/manage/datepickertest.php
do I need to add a js function to retrieve the results of the selection?
If yes, where and which one?
Once I have the date range in a php variables I am able to play with it.
The hard part for me is to get there!
Thanks!
Luca
July 17th, 2009
Bravo! This is the coolest calendar datepicker I have ever soon.
You rule!
July 18th, 2009
oopss...my code had been removed.
I try again
bye
Luca
July 19th, 2009
Hi,
@Lim, sorry - I don't quite understand the issue. Do you have an example URL?
@Kumar, the multimonth calendar isn't very optimised (it simply creates multiple copies of the single month calendar on the page) so it is possible that it won't perform too well... Please create an issue on googlecode and I will try to look into it if I have some spare time.
@Lucadg, it looks like you are using a different date picker so I'm afraid I don't know how to help you out.
@Jai & @William, thanks!
Cheers,
Kelvin :)
July 19th, 2009
last try
<form name="dateblock" method="post" action="datepickertest.php">
<p id="date3" align="center"></p>
<input type="text" name="theDate" id="theDate"><br>
<input type="submit" name="btnSumbit" value="Submit" class="system_content_small">
</form>
July 19th, 2009
ooppss..sorry! Same name...
July 21st, 2009
Hi Kelvin,
I managed to resolve it.
Bec the id of the text box is after my ajax call, hence when the function runs, the id was not initialise the first time round. To overcome that I have to use the jquery.live command and and call the function again after the readystatechange. Afterwhich it works!
July 21st, 2009
Hey, check it out... I'm pretty sure Paypal's new calendar is based on this plug in!
It has the same layout, and the html stucture looks the same... haven't checked out the JS yet.
Congrats!
Great calendar by the way, I compared this to the one with JQuery UI, and chose yours as it will be MUCH easier to integrate with our site. It's leaner, and a LOT easier to theme. Thanks!
July 26th, 2009
Hmm, Paypal's uses YUI, but I DO think it's remarkably similar...
July 26th, 2009
Hi,
@Lim - glad you figured it out.
@J - glad you liked the plugin and found it easy to integrate :) The paypal calendar does look a little similar but I think that is bound to be the case - after all a calendar is just a table of days in the end... I like the "calendar icon as a background graphic on the input" trick they use though - I might have to borrow that idea for my plugin!
Cheers,
Kelvin :)
July 30th, 2009
True, but PP's does have just the same layout unlike many other calendars!
I happened upon the idea of using the calendar as a background image for the layout too. My designer wanted it inside the field, and I was having an issue where it would appear in a different spot depending on if it was triggered by the icon or by the input. So, I made it a background image, just set the position to 100,0 and then also have a nice css hover on the calendar. This way it is only triggered by one element, so it always opens in the same spot. Maybe there is an other way to have done that.
August 3rd, 2009
Hi Kelvin,
Thank you for the datepicker.
I am facing a problem. I use datepicker with month and year in dropdowns, and year dropdown with range 1900 to 2009. The date format i changed to dd-mm-yy. This works fine for me in my first page. Here i saved the picked date in database. In the next page i want to populate the date from the database to my jquery datapicker in that page, where i failed to do so. Instead of populating the saved date, i am getting the current date populated in the datapicker textbox. Here is the sample script,
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
$('#datepicker').datepicker({ yearRange: '1900:2009' });
$('#datepicker').datepicker('option', 'yearRange', '1900:2009');
$('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
$('#datepicker').datepicker('option', 'dateFormat', 'dd-mm-yy');
});
Date:
Instead of populating 01-01-1981, its showing me current date. If i remove $('#datepicker').datepicker({ yearRange: '1900:2009' });
$('#datepicker').datepicker('option', 'yearRange', '1900:2009');
$('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
$('#datepicker').datepicker('option', 'dateFormat', 'dd-mm-yy'); from the javascript, it shows me the required date (01-01-1981).
Any help would be appreciated..
August 3rd, 2009
Hi,
@J - yeah, that sounds like a nice approach and one that I will try to include as part of the next version of my date picker.
@George - I think you are talking about a different datePicker. Mine has a different set of options and is found here:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
Cheers,
Kelvin :)
August 4th, 2009
Hi,
I'm having a problem each time I select a date i've got an javascript error, but it only occors in IE7
Line 172 'length' has a null value or is not an object...
This is a aspx form with Dot Net 3.5.
Can you help?
Thanks
September 3rd, 2009
There is also a bug with Google Chrome... When you choose the date format dd/mm/yyyy and try to pick up a date later than the 12th of any month, it returns a mistake. I think Chrome takes the day for the month and the month for the day...
September 5th, 2009
Hi,
i want to default disable all day. Only few days enable.
renderCallback:function($td, thisDate, month, year) {
if ($td.html() = 1 || $td.html() = 4 ) {
$td.addClass('enabled');
}
}
sorry about my bad english.
Thanks
September 15th, 2009
Hi Kelvin,
Your date picker is super awesome.
Right now the output when a calendar date is chosen is:
Thu Oct 15 2009 00:00:00 GMT-0400 (Eastern Daylight Time)
Any hints on how I could get more simple output, like 10152009?
Thanks!
October 5th, 2009
Hi,
I am trying to create an availability selector where users can choose which dates they are unavailable.
I'm using the datePickerMultiMonth with selectMultiple = true
I've set the date to Date.format = 'yyyy-mm-dd'; because I want to use the MySQL DATE field.
In testing, dpmmGetSelected returns long strings of numbers like: 1261440000000,1261526400000,1261612800000.
What are these numbers.. some sort of timestamp, i'm guessing? Is there a way to put them into mysql format on the client side or do I need to do it server side?
I eventually want it do be an ajax request, so I don't need to use the input field where the date displays correctly.
Thanks, and great plugin Kelvin!
November 3rd, 2009
Hi,
@Tiago - did you figure it out yet? Maybe if you can supply an example URL I can help?
@Fix - did you set Date.format = 'dd/mm/yyyy' first?
@Hakan - you need to set a class of disabled on the dates you want to enable - you can't do it the other way around...
@Jason - that's your browser calling toString on the date object. You could use date.asString() to get it in the Date.format you have chosen or date.getTime() to get it as an integer etc...
@Beren - I think your problem is the same as Jasons. They are date objects so you can loop over them and call asString() on each one to get it in your chosen date format.
Hope that helps and sorry for the slow replies!
Kelvin :)
November 3rd, 2009
Thanks Kelvin.
Does this look like an ok way of doing it?
$('.submit').bind(
'click',
function(e)
{
var dates = "";
selectedDates = $('#availability').dpmmGetSelected();
// Create a comma seperated string to pass to server.
jQuery.each(selectedDates, function() {
var dtm = new Date(this);
dates += dtm.asString() + ",";
});
dates = dates.substring(0, dates.length - 1); //chop off the trailing ","
}
);
November 4th, 2009
Kindest Kevin,
Me using your jQuery date picker with ASP.NET AJAX. This jQuery date picker in a Update Panel. Below is the code,
********************************************
JQuery Date
$(function() {
$('.date-pick').datePicker();
});
function pageLoad() {
}
.style1
{
width: 100%;
}
.style2
{
width: 194px;
}
********************************************
The problem was after click Save Button, the hyperlink Choose Date was disappear.
How to make it, the hyperlink Choose Date not disappear after Save Button click?
Did you have any idea?
November 8th, 2009
Hi,
@beren - as discussed via email, there is a new example which may help you out - posting it here so it can help other people too - date picker multi month combined with a form:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiMonth4.html
@Delinda - I think your code got eaten by my blog comments form. Maybe try posting on the googlecode issues list...
November 9th, 2009
I need a date picker for start/end dates w/ start/end time (hours/minutes & I need it to input in the configuration > mm.dd.yyyy hh:mm AM
but for adding an event via Google calendar, Yahoo Calendar, .ics & .vcs. I have code that allows addition to all the above w/ this format > mm.dd.yyyy hh:mm AM/PM Example > (ical) DTSTART:19970714T170000Z
DTEND:19970715T035959Z
Can you help? I don't need the input text to say Monday, Tuesday etc or month name etc. Thanks, Gene
November 13th, 2009
Hi Kelvin, first of all thanks for answering all our questions through these years! The datepicker is awesome!.
Right now I'm using it for my final work's thesis.
I have this problem (only in IE):
When I click on a date, the date should appear in a textbox but it doesn't.
Now, the datepicker has a range of dates (a week) selectable.
Whenever I click on a selectable day, nothing happens but......If I click outside the range say..in another "unselectable day" then the previously clicked date appears in the textbox. I would really appreciate if you give me some hint on what's going on.
http://www.progsoft.cl/titulo/index2.html
Ricardo.
November 22nd, 2009
Hello Kevin,
I'm trying to create to use your calendar picker in the following way.
I want someone to pick a start date in one text field, and in the end date text field, the date auto populates to a date 6 days ahead of the start date.
I am able to at the moment default the selected date in the end date calendar picker to a date 6 days after the start date selected, but i want to auto populate the second text field with this date, so a user does not have to open another calendar just to select the end date.
November 23rd, 2009
Hello Kevin,
Ignore my previous post, i have figured it out and got it working just how i want, I'll post my code here later, it may help someone else who wants to do the same some day.
November 23rd, 2009
I would like the calendar to appear when I click on the input field but I do not want the calendar image to appear next to it. How do I remove it?
November 24th, 2009
Morning Jenny,
You can remove the reffence to the image within the css class and add this javascript to call the calendar when the text field is clicked:
$(function()
{
$('.date-pick').datePicker({clickInput:true})
});
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat; <<-- delete this line
}
"Jenny Phan
I would like the calendar to appear when I click on the input field but I do not want the calendar image to appear next to it. How do I remove it?"
December 1st, 2009
Hi Jenny,
You can pass createButton: false and clickInput: true when you initialise the date picker,
Thanks,
Kelvin :)
December 7th, 2009
Hi Kelvin,
I'm trying to make my datepicker not jump to the selected month, in your email, you suggested I set the third parameter to false (and the second parameter to true).
Is this what you mean?
$avail.dpmmSetSelected(
selectedDates[i],true,false
)
If so, it doesn't seem to work.
Cheers!
B
December 9th, 2009
Hi, this is a quite half heartedly developed plugin, it's either u're lazy, or too busy, anyway, for people that want to use a datepicker for a live production server, don't use this one, it's way too buggy.
But if it's just for some simple homework ... well this should do ...
December 10th, 2009
@WEW
I use it in a production environment and it's very reliable. It's your first post and you haven't given any examples of any bugs.
It's poor form to start slating something without giving and reasons.
December 10th, 2009
Can you confirm that it's impossible to select a start date using the datePickerMultiMonth plugin?
That's such a shame, i'll give it a go following the instructions as per http://code.google.com/p/jquery-datepicker/issues/detail?id=79 as you suggested.
Thanks for this though, it really is the best multiple month system out on the internet at the moment.
December 15th, 2009
I have a problem with this plugin. I need to use 2 fields with the datePicker plugin and one textarea usin tinyMCE.
Initially, the page looks all right, but when I click in the link to show the calendar, and exactly when I click on one day, the text area with tinyMCE disappears.
Does somebody had the same problem?
It occurs only in (mothef***) IE6, how I expected.
Anyway, this plugin is very nice, congratulations.
December 22nd, 2009
I am using the date picker control for one my projects. I am facing the below mentioned issue on the HTML page:
If the date property is too low on the page to allow the date picker control to be display below, it is not being displayed above the textbox.
I have created two HTML pages with date picket control. In one page it is working and in another page it's is not. The only difference between both the pages is "'" element. Working page has this tag and the non working page doesn't.
Problem is I cannot add the doc type in the HTML page manually since I am creating a control for date picker that can be added to the page on run-time in Share Point 2007 Web Part.
I have downloaded the date picker from the link given below:
http://keith-wood.name/datepick.html
Please let me know how it will work with the doc type element
December 28th, 2009
I am using the date picker control for one my projects. I am facing the below mentioned issue on the HTML page:
If the date property is too low on the page to allow the date picker control to be display below, it is not being displayed above the textbox.
I have created two HTML pages with date picket control. In one page it is working and in another page it's not. The only difference between both the pages is "" element. Working page has this tag and the non working page doesn't.
Problem is I cannot add the doc type in the HTML page manually since I am creating a control for date picker that can be added to the page on run-time in Share Point 2007 Web Part.
I have downloaded the date picker from the link given below:
http://keith-wood.name/datepick.html
Please let me know how it will work without the doc type element
December 28th, 2009
Very nice datepicker.
But i have a problem to use it with prototype in Opera, Safari, Chrome even when i use jQuery.noConflict() function and jQuery instead $.
Datepicker does not show.
January 13th, 2010
I have just downloaded the latest version and have no any problem in Opera now. The problem still remaining in Safari and Google Chrome, but with mootools (not prototype). Safari say "TypeError: Result of expression '$$.shared' [undefined] is not an object." in mootools.js:55. So, the datepicker table is not rendered, only datepicker header. $
January 13th, 2010
I am new to jquery and have finally figured out how to get your "great" datapicker to work, however, when I put it on my html page the calendar opens up in back of my other divs that are below it, so I cannot pick my dates...I have tried everything but cannot fix. Can you please help me? I also cannot see the datepicker in IE, is there a fix for that as well? I can see it in mozilla.
thank you much
January 21st, 2010
hi, thanks for datepicker.
but i have a problem in Opera 10.10
if i input in code:
Date.format = 'mm.dd.yy';
The datepicker doesn't show the year at the input form.
For example: the real date is '22.01.10', but the input form has '22.01.'
can you help me?
sorry for my english.
January 22nd, 2010
i'd like add more information:
When the button is clicked on the value of the selected date will be placed in the corresponding input
And the date is '22.01.' in Opera 10.10, but should be '22.01.10'
January 22nd, 2010
this is not doing anything for me:
$(function()
{
$('.date-pick')
.datePicker(
{
createButton:false,
renderCallback:function($td, thisDate, month, year)
{
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
}
)
.bind('click',
function()
{
$(this).dpDisplay();
this.blur();
return false;
}
)
.bind('dateSelected',
function(e, selectedDate, $td)
{
console.log('You selected ' + selectedDate);
}
);
});
I want to only be able to pick the weekdays dates and not the weekend, however I am still able to select the weekend dates even with this suggested code. I prefer to see the columns to show in order like : saturday, monday, tues., weds., thurs., friday, sunday but the weekends dates would auto be disabled, so you can't click it.
How you do that? what am I missing. BTW great calendar, only needs to be CLF compliant to make accessible to disable people using only keyboards.
January 25th, 2010
last post: January 25th, 2010 from Eric - I got it working, please disregard it.
The only question I would have is how you display the saturday colum first before the monday instead of saturday,sunday has the last 2 colums? thanks.
January 26th, 2010
I figured it out by changing this:
Date.dayNames = ['Saturday','Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
however when I wanted to disable the weekends, now the colum friday and ssaturday is disabled.
January 26th, 2010
Nevermind got it working, thanks for not helping me lol
add("isWeekend", function() {
return this.getDay()==1 || this.getDay()==0;
});
sorry about the messages, we can't edit our own comments.
January 26th, 2010
when you change the dayNames if also affects the days in the month. For example, Jan 25 which is a monday is now sitting under sunday. So if you make a change in the dayNames, where can you change so the days falls properly under their dayNames?
January 26th, 2010
Hi all,
@Andy - Can you provide a link to a page displaying the problem.
@Janet - Look at the z-index in the CSS file.
@Masha - this looks like a bug with the latest version of Opera. I opened an issue for this and will look into it when I get a chance ( http://code.google.com/p/jquery-datepicker/issues/detail?id=162 ). In the meantime, a four digit year works: Date.format = 'dd.mm.yyyy'
@Eric - NO! Don't change the days of the week like that, as you've seen you are just changing the labels not which day of the week shows up. See this very simple example of what you want to do:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDateFormat.html
Cheers,
Kelvin :)
January 26th, 2010
Hi kelvin, thanks for this great datepicker.
I got one question, how can I change the value in my current input into +7 days after today?
i have to display 2 inputs : 1st is today, 2nd is nextweek.
I got the current date by using this : $('#date1').datePicker().val(new Date().asString()).trigger('change');
Regards.
January 26th, 2010
You can try this:
$('#date2').datePicker().val((new Date()).addDays(7).asString()).trigger('change')
Cheers,
Kelvin :)
January 26th, 2010
Thanks for your great fast reply, one more question please.
I got two forms in different layouts : the leftbar form and the form in main content.
I just want to pass the dates in left form to the main form when i clicked submit button on the left. like date1 = 01/02/2010, date2 = 09/02/2010
when submitted the dates values filled in the main form in the same values.
Thanks again.
January 31st, 2010
Hi Kevin,
Thank you for your work. I've tried a few jquery datepicker plugins and this is by far the best.
February 12th, 2010
Excellent plugin.
I have an issue I cannot seem to fix. The question was previously asked by Chritophe Brun, and answered that the issue was fixed - but I am not finding this to be the case.
I use a jQueryUI dialog for a simple form. The user enters some data, including start and end dates, then submits the form using an ajax call. They can repeat this many times for each item they wish to add. When the form is submitted I use jQuery Form's 'resetForm: true' to reset the default values. However, the dates remain the same as the last selected.
This makes it so the user cannot select the same dates...or worse, they fail to notice that the date is in a different year.
How can I cleanly reset the date picker fields without refreshing the page?
Thanks
February 12th, 2010
Hello Kevin
I am using you date picker and it works great!. The only problem I am having is, If I load the textbox with any date (on page load), the datepicker does not navigate to that date. I have to navigate manually to the month/year entered in the textbox to see it selected.
February 15th, 2010
Hi
Great widget !
- i need to have a date selected on open (other the Today)
my problem is tha when i use the setSelected function ..
it start Looping :(
My Code (doest include the helper .. but ..)
$(function(){
var dtStart = new Date(Gl_today).substYears(1).asString();
var dtEnd = new Date(Gl_today).addYears(1).asString();
$('.calendar-container').datePicker({ inline:true,
startDate:dtStart,
endDate:dtEnd,
month:extractDate(getQueryDate()).getMonth(),
year:extractDate(getQueryDate()).getFullYear()
})
.bind(
'dateSelected',
function(e, selectedDate, $td) {
$("#event_list").show();
$("#date_today").text(printDateOrRange(selectedDate.asString(dtWorkFormat),selectedDate.asString(dtWorkFormat)));
window.location.replace(buildEventCallurl(selectedDate));
});
});
----
Any Advise ?
February 18th, 2010
Hi I'm using date picker for a form with a start date and end date
I have set up the inputs to use dd/mm/yy. They submit fine in this format.
When the page is reloaded, I reload the values into the datepicker inputs, but when i do they revert to the US format mm/dd/yy
I discovered that if I load the values into a pair of hidden inputs, and then let the JavaScript copy them to the real inputs AFTER the dd/mm/yy options had been set that they work fine.
Hope this helps any others facing this problem.
February 24th, 2010
Reply to “jQuery date picker”