Unobtrusive Date-Picker Widget Update

The link to the download is returning a 404 – otherwise your tutorial articles are well formatted, easy to read. good show.

Great Work.
What are the license for this calender? Would it be possible to release it under a MIT/BSD style license?

I really like your implementation of this control. I did some testing of my own and found that it works fine in both Mac Firefox 1.5 and Safari 1.3.2. It does not work on Mac IE 5.2, but not much does these days.

However there appears to be a strange clipping problem of the drop down menu in IE 7 beta 2. The menu overlaps the select correctly, but is only rendered directly below it’s parent text input. Since the right side of the drop down stretches beyond the text input, it is cut off.

Under IE 7beta2, the your first version of the control displays m-f and clips Saturday and Sunday. The second version of the control has a narrower text input and therefore only displays Monday-Tuesday. The rest is clipped.

Sorry about the bad news. I hope there is a simple fix.

I also would like to see if you would mind licensing this under a more friendly license that would allow for commercial use. If you do, I plan on creating a widget for the TurboGears web framework, since your widget is so much prettier than the default!

Great work, and I really hope you are willing to relicense the code!

Hi, another comment about the license issue.

We are starting an Open-Source (or Free software) project and were interested in your code. Even though the creative commons license would allow us to do so, it would not allow us to eventually distribute our modified version under a different license which either:

1. Does not allow commercial/non-commercial restrictions (e.g. the GNU GPL).
2. Does not contain any restrictions (e.g. the BSD license).

Thanks for the great site.

Firstly great work, a very clever & beautiful widget.

The only issue I can see is with the file size, 50K for a date picking script is a bit much if you ask me. It’s almost 5 times the size of my page which has print & screen CSS, and AJAX functionality A lite version would be a great addition. No key scripts (as it’s only going to be the developer who knows what the keys are) & modulate the JavaScript into several files. Only including the ones you need. IE.

dateLimits.js
locals.js
keypress.js
etc.

For now I’ll have to keep the “nasty JavaScript pop up” approach :(

wooow … me like …

Yet another lovely looking unobtrusive script. Great work!

That’s handy tool, man. Thanks for the sharing it.
Here’s the Portuguese version (All special characteres are in unicode): www.plasmadesign.com.br/files/pt.js

Cheers!

The date picker will be covered by the select drop down if I press the date picker icon while the date picker is showing. (e.g. just press two times the icon)

nice work, are there any news about the license ?

BUG!

I was trying to get the divider feature to work in this new version, however, it wasn’t working at all.

The fault lay with the dividor spelling mistake still present in this version.

Hope you can fix it?

Cheers
GK

I’d also like to note that an ID attribute for the input tag is manditory otherwise the datepicker will not work in IE6 or 7.

GK

There’s a typo “dividor” on lines 909 and 946 that breaks the divider feature.

Czech locale: http://tmp.alphanumeric.cz/datepicker.cz.js (UTF8)

First of all my compliments, it’s a very nice tool.

But here’s a bug I found (and fixed). I am using the date-picker with IE 6.0 and it would not function at all. It would display ‘November 0’ and selecting other months/years would result in a empty calender window. Also when selecting a date, the used fields would display NaN instead of the selected date.
I did some debugging and came to a fix. In the function SetDateFromInput (line 526) you construct a date from the input fields. Offcourse when nothing is filled in yet the date is invalid. But the check wether the date is valid or not fails in IE 6.0. The script thinks that a date like ’//’ is valid and therefore this date is used. Offcourse this results in many problems.

So what went wrong. This is the bugged check (line 567):

if (new Date( dates[y] + ”/” + dates[m] + ”/” + dates[d] ) 'Invalid")

Seems fine, but IE 6.0 doesn't return 'Invalid' on a corrupt date. It returns 'NaN'. So this is my fix:

var checkdate = new Date( dates[y] + "/" + dates[m] + "/" + dates[d] );
if ((checkdate ‘Invalid’) || (checkdate == ‘NaN’))

Now it works perfectly for me, thanks for creating this tool ;)

No problem, Brian, I’m glad I could help.

I found another issue… I started to see a mirrored page background under the calendar in IE – I found out it’s the iframe, loading a 404 page on the server :) You reference the blank.htm relatively from the actual page. I think you should sort of sniff the script’s location (as you do with languages) and link the blank.htm this way. I tried it with an empty src and it worked, however it raised “unsecured content” warning when accessing via SSL.

Feel free to add my Swedish translation
Could you link to www.haf.se as well?

Great work!

Does anyone else have the problem that there is often an extra blank row at the exd of the month. Are the amount of rows constant? As a note, I have the first day of the week set to Sunday.

I have looked at the original widget page and this new page. I have also looked at the files included in the download.

How do I customize this? thank you :)

Hello!!
I have a question …

I apologise cause I wasn’t clear. I said “customize” I meant what are the different parameters and parameter values that can be used.

thank you.

just tested the date picker on IE7, the right portion of the picker is cut off. see this: http://img145.imageshack.us/my.php?image=untitled2dx2.png

In response to Rick and a problem I wanted to solve too, I have found a away to quickly remove the calendar button and instead, use the input box as the way of activating the calendar.

To do this I simply changed line 1022 to

inp.onclick = inp.onpress = function() {

and then I commented out line 1014 and 1016

Now, the script doesn’t display the date button and when you click on the input box, it shows the date picker :)

Cheers
GK

Doesn´t work in my firefox 2. Got the error:

Fehler: datePickerController.datePickers[dp].hide is not a function
Quelldatei: http://localhost/scantickets/verwaltung/javascript/datepicker.js
Zeile: 883

BUGFIX:

change line 883 FROM:

datePickerController.datePickers[dp].hide();

TO:

if(typeof(datePickerController.datePickers[dp].hide) == ‘function’) datePickerController.datePickers[dp].hide();

Ciao André

This script is great! The only thing I see it missing is an option to use dropdowns instead of text input fields – Do you have any plans to include this in future iterations? Other than that, this is by far the best date picker widget I’ve seen. Nice work!

Brian – excellent script! Works well and especially within one of my complicated setups. However, when I do put it in MY page, the calendar is about twice as big and the days of the week ‘up’ styles make it invisible until I mouse over them. I’m pretty sure there is probably some CSS conflict…what do you think? What’s causing the size change and what CSS do I edit to make it all visible?

Thanks for any insight!

Hi Brian,

After a few hours of breaking it down yesterday, you’re pretty close with #2. In the styles that are defined on the actual page (rather than the file that’s linked), the body tag uses a font-size: 12px and in MY body tag, I have it using 1em. If I change mine to 12px, then the calendar-size is perfect, but then all my text on my page is small. Is there a different way to control JUST the calendar fontsize w/o defining it in the body?

3 other questions:
1. Is there a way to display two months side-by-side?
2. Is there a way for when you pick the date, it says October 16, 2006 (rather than 10/16/2006)
3. I want to use just the textfield to activate the pop up, how do I get rid of the calendar .gif? I tried Stephen Hill’s recommendation, but that didn’t work.

Any more insight would be greatly appreciated!

Thanks!

Dan

changed .datepicker class width to 23em. that fits.

==========
in 1 of your replies above, you mentioned ” Hi JL, you need to add various classes to the associated input’s className. All of the different classes have been detailed within the two posts”. Can you point me to the “two posts”?

great picker.

thank you for the help :)

Hey! Great stuff! Have done a swedish translation that i can send to you if you want as well.

Thanks Brian! Adding the font-size in there fixed it for me. As for the other 3…well, it’d be nice if those options were available. This is definitely suitable for now though.

Two other features that would be nice is when you open the calendar, 1 – If today is October 27th, then all the previous days would be x’d out and unselectable. 2 – If you were using it as sort of a reservation time period, when you select the first date, you can’t select that date or prior dates as the 2nd date. Savvy? I’d pay for that!

Thanks again!

This is a both brilliant and beautiful script.
One small caveat I’ve encountered: When serving XHTML as application/xhtml+xml, tags and attributes are – in contrast to the more liberal HTML parsing – case sensitive. Also the XHTML spec states that tags and attributes should be lowercase. This cripples (but not entirely breaks) the script. I suggest the following remedy:
In o.titleBar.setAttribute(‘colSpan’,’5’) (line 499) colSpan can afaik safely be changed to colspan.
On line 965, the check for tagname “INPUT” could be changed to ..toLowerCase() == ‘input’.
Thanks!

Hey there, excellent script.

Is there any way to make the calendar only closable when you click the calendar icon instead of the whole body?

Thanks!

Brian,

Perfect. Thanks!

Dan

Whoops! Spoke too soon. IE doesn’t follow. Any fixes for that? It does work in FF, Netscape and Opera.

Hi Brian,

This is a true gem. Keep it up!
—M

Brian,

Could be me, but I have an issue when I use the calendar within a region after an Ajax call. I update a div with an input element and for some reason I don’t see the calendar icon on the right (and no hidden features also). Whenever I use the same code within a ‘standard’ page, all is well. Any thoughts? The generated HTML-code from the Ajax call is the same. Checked it using firebug.

regards,
Martijn

missing ”;” on line 471! And why can´t i compress it with javascriptcompressor.com? Doesn´t work after compress. :(

Ciao André

Another Question, will there be a mootools version of the script? Could save a lot of traffic. ;o)

Ciao André

Hi Brian,

That works well for IE! Too bad the new version (IE7) still needs workarounds!

Now, I did notice a JS error with IE6. In my Opera Error Console, I have 2 errors:

1. I have calendars on 2 pages. The first page has 4 calendars (2 start and 2 end dates). I just added on 2 more variables and everything works fine.

On the 2nd page, I have 3 calendars…I have a start/end which work fine, then I have one other one that just picks a date. I didn’t want to have the user select an expired date, so I added a variable to the script, but that’s causing an error (probably because it wants an end date…?) How can I just apply the idea to one calendar as well where all expired dates wouldn’t be selectable without having an “end date”? Or, I should I just remove it (letting them select any date) and that would solve the problem…

2. I didn’t see this error pop on your example, but on my second page (with 3 calendars), it is complaining about line 843 of the datepicker.js: obj[“e” + type + fn)](window.event);

Any ideas on that?

I swear, I’ll never bother you again! :)

PS, here’s the page in action: http://petcaregroup.com/newclients/consult.asp

@Brian: I don’t just the .create() method to generate an input box. It is even the same rhtml partial and the generated code checks out well (i.e. they are identical) when I inspect the Ajax’ed div using Firebug comparing it to the non-ajax’ed source. On request I’ll send you a RoR example.

Thanks, M

Thanks Brian! I agree (with the simplicity) – so I removed that. I implemented your updated version and it works. I like the new touch where the ‘ed’ can’t select a date before the ‘sd’ (as opposed to just a date before the current date). Is there a way to display it as MDY instead of DMY?

Thanks!

Brian,

last post, I swear!

Simply changing the class didn’t keep the effect for the ‘ed’ where you can’t select before the ‘sd’ – see: http://petcaregroup.com/test/reservation.html

Also, in IE, the calendar, tuesday’s column was very wide for some reason. I switched my datepicker.js back to the original one, and that solved that.

I’ll check again and see if you found a quick solution…otherwise, thanks for giving it a shot!

Dan

NEED HELP PLEASE

Here is what I am trying to do. I have a Drop Down list with five options. What I need to happen is that depending on what option is selected, the calendar disables certain days of the week based on the option that is chosen, BEFORE the form is submitted,

For example, if the visitor selects Option 1, I need the calendar to automatically disable days 67… if Option2 I need to automatically disable days 1267… Option 3, 267… Option 4, 267… and Option 5, 67.

Is this even possible?

The reason for this is my Drop Down List is populated with Shipping Options but not all options are available on each day of the week. What I need is for the calendar to automatically disable certain days of the week based on their Shipping Method selection so that the visitor can’t select a date that is not available.

Hope that makes sense… Any help would be greatly appreciated. Thanks.

can language files be in UTF-8 directly? not the unicode (\u….) for every single character

Ok, here is an Arabic locale file (utf-8 encoded)
www.InfoChallenge.com/DatePicker/ar.zip

i have tested your script in an RTL page, it looks ok… so far i can’t see any need for tweaking

cheer,

Hassan

Polish translation (utf-8):
http://www.xms.pl/unobtrusive-date-picker-widgit-pl.zip
You just have to specify encoding in the html file to make it work properly.

RE: MSG 61/62
I finally got around to testing your solution and guess what… IT WORKED! Awesome! Thank you for the solution… very much appreciated!

Hi Brian,

Is it possible to have an equivalent of the highlight-days function to highlight days that have an entry. Lets say monday 13 and wednesday 22 are the only two dates in a month that have an entry, how would it be possible to highlight these. As i understand the highliting of the days like the sa an su in the demo works on a weekday basis, not a date basis.

Kind regards,
Alexander

Well, when you load the locale file simply add the attribute charset=”utf-8” to the script tag, this way it should load fine

How do I load the current date onto the text field as soon as the page is loaded?

Any tips?

Thanks!

where should i look to make Datepicker add zero time to select date ( 00:00:00)?

the broader question is, how to avoid having (undefined NaN) errors with an input box containing a date in this format: 2006-11-23 19:19:57, i know DatePicker doesn’t manage time values, but can’t we get it to simply ignore the time part?

I think igot it, say you have an input field with a format like: yyyy-mm-dd HH:nn:ss and you still want to use this Great date picker (even though it does not support Time), well you can have DatePicker ignore the time string (or any string following the date part….)
—-replace line 561 :

elem.value = o.format.replace(‘y’,yyyy).replace(‘m’,m).replace(‘d’,d).replace(/-/g,o.divider) ;
with (2lines):
append = elem.value.substr(10);
elem.value = o.format.replace(‘y’,yyyy).replace(‘m’,m).replace(‘d’,d).replace(/-/g,o.divider) + append;

this worked for me on FF/IE6

@Brian: Hi Brian, great work! I’m having the same problem Martijn is having. I don’t think I’m calling the datePickerController.create() method correctly after my Ajax reloads the new input box. It looks like on the initial page load the script uses:

datePickerController.addEvent(window, ‘load’, datePickerController.create);

How do I get the date-picker-control button to appear after my Ajax changes the input? Currently I’m using:

datePickerController.create();

How do I correctly call this method?

You can change line 1078 from:
but.onclick = but.onpress = function() {
to:
inp.onclick = inp.onpress = but.onclick = but.onpress = function() {
in order to have both image and input field clickable.

BTW, great stuff! :)
Maybe you could also publish a compressed version?

@ Brian: I think it’s probably something I’m doing. Here’s a link to the page I’m working on: http://dev.napali.com/compare_boat_tours/

Click on a radio button and AJAX will replace the id=”dateControl”. I need to be able to change the class within the input to alter disable and range dates.

@Brian: Well I’m a total kook! I guess I should have read the instructions and I would have seen that you already have a way to set the disableDays and limits dynamically…Anyways, I wrote a bunch of AJAX i didn’t even need. Thanks again for the great script! Glad you like my table

Everybody using this script, hit that PAYPAL button and donate. Brian deserves it.

Hi,

In Safari, the date picker doesn’t let me cross year boundaries with clicks on the previous month button. To get from January, 2006 back to December, 2006, I have to click the previous year button. This bug isn’t present in Firefox.

Also, it’s worth noting that in Safari, the default next/prev month chevron buttons format very small and close to the next/prev year double-chevron buttons. It’s very hard visually to distinguish between them. The next/previous month buttons are more heavily used than the next/previous year buttons, so they should present a larger target area than they do.

I had planned simply to remap the next/previous year buttons so that clicks on the double-chevrons would increment and decrement the month, but the Safari bug with the year boundaries prevents it. (My use case never requires full-year traversals.)

I haven’t debugged this one yet. Has anybody already written a patch?

Hi,

How can I disable only one day in the year (e.g. 25-12-2006) without disabling each mondays in the week?

Thank you for your help!
Cheers,
Vince.

Update: Hi Vince, I've added functionality that enables you to disable certain dates (v2.6).

Hi Brian,

Is there any way to set the default date? Currently if the field is empty it will start on today’s date, but I would prefer it to start back in the 80s (birth date picker) or so. I’ve looked through the code and had success hacking a few things, but have been unable to track down where this is set.

I could easily just default the text box to the date which would take care of the picker, but that may confuse the user to have text in that field that they did not enter.

Any help you can offer would be much obliged. Thanks!
Troy

This script is great, but it’s not working in IE6 for me. I click the icon and an hourglass flashes briefly but the calendar never shows. Do you have any suggestions about where to look? (Pretty vague, I know.) The name and id attributes don’t have to follow any sort of naming convention do they?

Thanks Brian! I’ll get to work on implementing that, much appreciated.

@Scott (#88): I found that the script will not work in IE unless you have configured yoru DOCTYPE to be a XHTML variant. HTML 4.0 will not work. Try this doctype up above your [HTML] tag:

[!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”]

PS: Please replace square brackets with angle brackets for obvious reasons.
Hope that helps.

@Brian (#89): Bingo. I had the doctype, but the preceeding [?xml version=”1.0” encoding=”ISO-8859-1”?] was apparently throwing it off. I need to read up on this stuff again. Thanks!

Hello,

Does anybody know why the script doesn’t work with HTML in IE?
This constraint is ruining my life, because I should modify all the views of my applications to make this work (since I should add this DOCTYPE thing in the header template).

Hope sombody can help with this.

Thanks,
Federico F.

PS: this is the most beatiful date picker script I’ve found on the Internet so far. Congratulations to the author!!

Hey, Brian.
At first, I must note this is the most top notch datepicker script I’ve ever seen. Great work! Can provide some beer from russian coders for that :)
Nevertheless, there is one minor bug (or feature, who guess).
In IE 6 and lower when u click an icon to activate the picker and when click the same icon another time — cancelBubble doesn’t work anymore, as it seems to me. Only refresh helps to hide the widget.

P.S. Tested the script in IE 5.5. Works quite well, but it’s necessary to put blank.html to take 5.5 into submission.

Damn sorry, not cancelBubble, of course.
Event to hide the widgets.
Fuhh.

Well done, sir! Works well both in 6 and 7.

Also, as an addition — russian locale (served as utf-8, hope there will be no problem with cyrillic).

Thank you anyway Brian!!! I won’t be able to implement it, because the deadline of this project (for college) was yesterday :( but I think I’ll use your script in virtually all my future applications. It’s just what you need for dates in forms! good job

Hi Brian,

the best date picker I’ve seen – bar none. A fantastic achievement.

I’m using it in an ASP.NET environment, and had to change returnFormattedDate a little to help out the ASP.NET validators.

My questions are:

Thanks a lot.

Hi Brian,

thanks very much for the speedy reply! Great news about the licence. I’ll let you know about the blog article when it’s done :)

Hello Brian,

I’m afraid that because of an upgrade I don’t still have your e-mail address :(

Could you please send me an e-mail and I can mail back a WebControl for ASP.Net that uses your Javascript? You can put it on this page… :)

Henrik

Hehe, just read the comments just above mine :p…

Good work, Brian – I really like the nice clean look and unobtrusiveness.

We’d really like to use your component in the Wicket project , but we’d need you to let us use it under an Apache license . Is there any chance you might consider that?

Hi. I wan’t to create datepicker translations to Russian and Ukrainian. Mail me and I’ll send it to you.

Hello, I would like to request an option added for transparency settings as well as for turning off the fade entirely similar to the format/highlight-days and other class attribute options. The fade and transparency looks awesome, but in some sites you might just want to turn it off to make the widget fit in better in the style of the page. Just a thought. Do you want me to submit the code for it, or do you have time to do this?

I think that translation should not be in utf-8, because it is not working correctly when site is not in utf-8, or when server is set for another charset with js files, better is to use unicode, as in german, italian, romanian or french translation. I am using this tool http://www.slayeroffice.com/tools/unicode_lookup/ when I nedd to see unicode character. Thank you for excellent script.

Hi Brian.
The script is great, thanks a lot.
We added the custom css class to define FirstDayOfWeek in input (we have server-side config file for this kind of variable). Do you want us to share our changes to you? How if so?
Have a nice day and happy new year :)

Hi Brian,
Here’s a Norwegian translation if you want to add it to the distribution. – Eirik

Hi Brian,

First of all, I love your script! I’ve used before a PHP class that created a popup date picker with all sorts of problems…

But my question for today is:
Is it possible to disable clicking for selecting the first day of week? I can’t find a solution to disable that clicking on a day sets that day as the first day of the week. Hopefully you can help?

I also have some problems with some (Dutch) months. In IE 7 a small part of the right side of the date picker is cut off, but that’s not a big problem for me.

Regards,

Hiljo Lodewijk
(Holland)

Hi Brian,

Thanks for your support. I’ve played a bit with the .datepicker CSS rule and now the calendar works perfect! Good to see that you’re giving some support, I appreciate that!

Thanks again,
Hiljo.

Guess, credit for russian translation goes to me (according comment #96).
Nick and url are same as here in blog comments ;)

P.S. Thanks for the latest update. Great work! :)

To: Frequency Decoder
Maybe you forget to mail me? :)

You can download Ukrainian translation here: http://web-development.com.ua/lang/ua.js

Hi Brian,

I have a problem with the datepicker. After submit of the form the clickable icons dissapears. I have to reload the page to get them back. I have a page which creates reports with 50 fields to select via checkboxes, and if I reload the page all the selections by the users get lost. Do you have an idea on what could cause the problem?

Regards
Ronnie

Hi Brian,

It’s me again with another question:
Is it possible to have some dates coloured? Like an agenda, so you can see on certain days you’ve got a job to do.

Hopefully you’ve got a solution to this!

Thanks again,

Hiljo

Is something wrong with my Ukrainian translation? :(

One other question:

In the case of start date + end date DatePickers, would it be possible to trigger a javscript function when the 1st DatePicker (i.e. sd) value has changed? For example: onchange=”javascript: x(y,z)”. I know it works on the second DatePicker (i.e. ed), but not on the first. I guess you intercept the onchange, but don’t return it?

Many thanks,
Nes

Hi!

Very nice script you have here. It works wonderfully, except for one little thing, and this is most probably my implementation of it that sucks… :-(

For some reason it positions the calendar opening at the bottom of the browser window (with part of it off the browser window) no matter where the date picker widget is on hthe page. It is as if it takes the bottom edge of the div containing the form.

How do I overcome this problem?

Thanks in advance!

Kobus

Superb script!

I am trying to remove/disable/hide the previous and next buttons when the date picker reaches its lower or upper limit. (e.g. If the upper date range is Jan 23 2007 and I am viewing Jan 2007, I want to get rid of the next buttons)

Can you offer some guidance to get me started with this?

Fantastic work. Need I say more?

hi all, i m new to datepicker, i have downloaded the code but not getting how it work, if someone give me the basic idea that will be great help.
Requirements : i have a textbox and beside have calender image. On click of this image it should open the calender control and on enter or click the selected date should come to the textbox.

hi, its possible to modify the reservation date with an third fild for the different (in days!) between the start and the end date.

for example:

start: 25.01.2007 end: 27.01.2007 booking: 2 days

Fantastic work – I’m really impressed with how easy it is to integrate this control into an existing web page – well done!

On a side note, how easy would it be to populate three select drop down controls (instead of three input text controls) in split-date fashion?

Best Regards,

Clive

I want to have the datepicker permanently displayed and dates saved to a hidden formfield, is that possible ?

Thanks for the tips F.D. – I've got it up and running with select drop downs! Due to some nifty coding on your part, the changes required were few and far between:

Update: Clive, I've removed the code as textile doesn't "do" code very well!. If you send it to me at brian (at) modernartcafe [d0t] net then I'll reintegrate it into this comment. Glad you managed to get it working!.

By the way, no changes to the setDateFromInput function were needed for it to work! Thanks again for writing a quality piece of code.

Hi. First of, congratulations, that’s a beautyful calendar component.

Now, it seems it doesn’t like NOVEMBER that much.
When I look at the demo (I tried it with Firefox and IE), NOVEMBER always starts on a date other then 1 (depending on the year it may be 3, 5, 6…).
For some years though, the calendar shows no date at all.

Is there a fix for this?

Thanks a lot!

Love this script. Thanks for putting it together. Is there a way to add some space between > and >> on the cal? Its so close together it may not be clear to people they are separate buttons.

Also, if I wanted to disable all dates prior to the current date how would I do that?

thanks

Update: In fact, to add a bit of space between the buttons, just add this to the stylesheet (Note, 0.2em doesn't stack in Firefox but I've not tested it with any other browser):

.but-spacer { margin-right:0.2em; }

and replace line 575 with:

tmpelem.className = "prev-but but-spacer";

and line 612 with:

tmpelem.className = "next-but but-spacer";

Just noticed that the JSON.js implementation over at json.org ... when the hideAll function is called, the exception – thanks you FireBug for helping me – is “toJSONString();” which actually is a function that is added to object by the previously mentionned .js file.

A fix hasn’t been made yet, though I’m looking into it.

wbr,
Bramus!

Found the real bug and solution already. Problem was that the last item of the datePickerController.datePickers had become “toJSONString” instead of an existing element. Trying to hide the element with the id “toJSONString” surely would give an error as it’s a function.

Solution is to change line 981 of the js a wee bit, so that it does not try to hide non-existing DOM elements.

orig line 981:
datePickerController.datePickers[dp].hide();

fixed line 981:
if(document.getElementById(datePickerController.datePickers[dp].id)) { datePickerController.datePickers[dp].hide(); }

Hi Brian

I am using without any problem your date-picker. Thanks for your time in coding it.
I am trying to use it inside an Ajax form, and I don’t get the calendar (only the texfield..) is it possible or not.. ?
thansk again

absolutely brilliant- you’re a hero!

Update:: Hi rowan, I see your ex Cambridge House, I'm ex Academy myself... it's a small world Norn Iron eh!

I love this script. Question: any easy way to have the calendar just appear on screen without without the text field and without having to click the cal icon. So when a date is clicked the calendar remains but a hidden text field takes the value. I’m trying to prevent people from entering the date manually in an incorrect format.

Thanks

No worries. thanks for the reply.

Hey, FD…. One more question… Can I get the calendar to appear when the user clicks in the text field as well as when clicking on the cal icon

how do i set a default date on the input field upon loading?

thanks and very nice date picker.

Hello, I am trying to find solution for serious accessibility problem with date picker. It works fine, it is keyboard accessible, but just until you use in form tabindex attribute. In that case, when are there in the form two datepickers one from and another to date, it is not possible to get focus on second input. To get from first input to datepicker and jump accross tabindex order is easy when you add event

document.getElementById(‘od’).onblur=function(){this.nextSibling.focus();};

But I cant find a way how to get by keyboard from first input nextSibling to next input, because when you use datepicker to fill first input it will put focus back to that input, so it starts circle around this two elements. So thre should be some workaround for this, probably rewrite whole page inputs with tabindex, following inputs with datepicker. You can try it here http://www.kongresove-sluzby.cz/poptavka.php I do not know, if I will be able to find any solution, so maybe I will have to forget to use this great enhancement.

Thank you for the answer, this was my fault. I have ask this question at sitepoint forum and they recommend me, that there is no problem to leave a huge gap between tabindexes . It is even better, because when you change something on page, you dont have to rewrite everything. So I just add tabindex to nexSibling , rewrite following tabindex after from-to inputs and it works perfectly now. So sorry for this silly post. Anyway, I think this information is not very known and may help someone.

Fantastic work – well done!

Again here, if someone will have similar problem like described above, there is another small bug in MSIE. Letter I in tabIndex has to be uppercase, or it will not works .

Not have been able to test it fully, but so far this has got to be one of the nicest (coded) js date picker I have seen and tried. Wow- impressive!
I will sure add some more comments lateron.. where is that donate button!

I have your wonderful datepicker nested within a div of my website that has its position set to relative. This setting seems to cause the calendar to not position itself correctly in IE7 (it opens way off to one side). Any ideas what may be causing the problem? Has anyone else come across a similar issue?

hi freq,
does this already have feature that can also sort text inside a list box? (currently selected text).

Again like all your other scripts this one is great. Not only is it easy to impliment it’s by far the easiest one to skin.

And now that I’m done suckin up =D, my question is:

I’ve read the entry about the start-day and how the user can change the start day of the week and how it’s defined by the language.js files. But when I try to switch the start day to default to Sunday, it throws all the dates off by one day. Is there a way around this?

In IE 7 the calender is clipped off on the right: Fixed by changing

/* The wrapper div /
.datePicker

Stumbled upon this widget. Excellent work. I found an issue for you to consider. I typed the American 1/1/07 in the text field (the demo textfield on your site) configured to expect d-m-y, entered the date picker, and then pressed the down arror key once and saw “undefined NaN” for the month and year. This probably should degrade more gracefully.

Is there a keystroke to enter the datePicker other than tabbing to the icon and pressing space? Something like the %lt;select%gt; down arrow.

This live preview comment block editing is annoying. The cursor can’t keep up with my typing.

Bug?

I have just found that out of Range dates( which can be set by setRangeHigh or setRangeLow methods) are clickable/selectable too. This shouldn’t be the intended purpose by going through the code’s logic. I have fixed it by modifying

Line 907: if(cells[y][x].className != “out-of-range”) {
as
if(cells[y][x].className.indexOf(“out-of-range”)== -1 ) {

Thanks.

Heya FD, and thanks for your script. Very impressive!
I’ve just got it functional (way easy) but when I use “divider-dash”, the calendar show me “May 6” as the actual month&year. Just when Jesus was 6! :D
This happens even if I use the no-locale class in my italian browser.
Just tried with Opera/IE/FF.
Thanks,
Paolo

when using setDisabledDates it doesn’t work for the 31st day of the month, this day remains active even if you have disabled it.

It would also be very handy to have a setEnabledDates method that would disable all dates except the ones specified. Without this I have had to work out and pass in a huge list of disabled dates.

Other than that its a great script and is the only one that does everything I need.

Excelent widgets,
i’ve use it in several projets already, thanks a lot.

but my firebug always show an error :
“document.getElementById is not a function” datepicker.js line 979.
my configuration : – firefox 2.0.0.2 – mootools v.1 – Moodalbox – Datepicker

but the odd thing is that the datepicker work just fine.

i dont know what’s wrong, or it is just an false alarm ?

thanks for the great widget.

Thanks Brian, you da man.

Hello Brian, i've just sent you an email about my error. thanks for the support and i'm looking forward for your reply.

Update: Hi Wishnu, mootools seems to be removing the document.getElementById function during the page's unload event. This means that any other script with an unload event handler defined can no longer use document.getElementById (as it no longer exists). A slap on the mootoools wrist is required. Hope this helps.

All the example files have a whole lot of JavaScript used to declare the calendar. If I want to include 2 calendars on my page – 1 into id “dateofMeeting”, 2 into “dateofTask”, what is the simplist declaration I can make? I have no restrictions on start/stop dates, no disabled dates – just need a simple date pop-up.

I know that in most every case I’m going to use format-my-d-y, divider-slash, and no-transparency. Is there a way to create a single attribute to the text field to include all that information and have the date-picker run with those “default” options when that class is called?

Sorry, that was a misprint on the format. Should be format-m-d-y.

I really like it.
The only problem I see ….

no validation??

If my users pick a date, and then just choose to type 42/43/3999 it’ll work

The DatePicker icon doesn’t have an ALT tag. Isn’t this required for WCAG compliance?

Thank you for this great widget! It’s just what I needed :)

Um, the version I downloaded has a, well, initially hard-to-find flaw. For range-low and range-high settings of “today” as in range-low-today and range-high-today, it looks like the code creates a range-limit date like this:

(new Date().getMonth() + 1) + ”/” + new Date().getDate() + ”/” + new Date().getFullYear()

Resulting in a date like ==> 04/02/2007

...but the range low and range high reads a date in this format:

2007-04-02

Um, the fix is to replace

(new Date().getMonth() + 1) + ”/” + new Date().getDate() + ”/” + new Date().getFullYear()

with

new Date().getFullYear()+ “” + (new Date().getMonth() + 1)+ “” + new Date().getDate()

Otherwise, an excellent script and I thank you for it. I’m unfortunately on a very tight deadline, but this has helped a lot.

Pat

Brian,
An amazing tool you have here. I’ve been using it for quite a while. Unfortunately i know only enough javascript to mess things up.
Here’s my question:
Using the reservation demo as a reference, is it possible to select a start date and then have the range low of the end date be start date Plus 5 years?

Hi Brian,
The java script datepicker you created is realy good, I like your idea of displaying datepicker image dynamically,
I am using your datepicker in my application where I am using ajax controls,
I am validating the user inputs using server side validation controls,
on selecting the date from the calender I am getting the java script error mesage “length is null or not an object”
If we don’t validate the page using server side validation controls we are not facing the error.
I am developing my application in ASP.Net.
Thanks in advance.

hello. congratulations for all your work. elegant coding and design. i’ve been trying the date picker for a reservation and i have 3 question: i tried to slip into 3 fields but it didn’t work. following that idea i wanted to put in the month field the month as text not as number. and my last problem: i want the user to make the calendar appear as soon as they click in the text field. i think the calendar button is far too subtle for many people…

hello again. as i didn’t read all the posts i’m sorry i didn’t see you already answer to my last question about making the calendar appear when user click the input field. but i have still a problem. i’ve add the piece of code:

inp.onfocus = function() {

after the 1153 line. the calendar will appear but chosing a date won’t make it appear in the input field.

Maybe I’m missing something here, but the documentation said that individual days will be available to style with a class of dm-day-month – however, all my cells are taking on the class of the currently selected date, by default that is ‘today’.
I have yet to try and sift through to code to try and find the cause, but maybe you have an idea of a fix?

Okay, I believe that I’ve found it.
On line 859 the script uses o.date.getDate(), o.date.getMonth() and o.date.getFullYear() which seems to be a general date object that defaults to ‘today’ – it seems like it should be using the temp date that was defined on line 823, so setting the date methods on line 859 to be tmpDate.getDate(), tmpDate.getMonth(), tmpDate.getFullYear().

The script functions as expected with this modification, but I’m interested to see if that is actually correct or if there’s a better way, one that maybe won’t break because although I’ve been coding for a long time I’m prone to doing the wrong thing ;)

I’ve got three dropdown-selects in my application for “day”, “month”, “year”.
It seem’s that the picke only works on text-input’s.
Is it possible to use this widget with dropdown-fields?

Regards,
Christian

This is an awesome implimentation. I have been trying to repurpose a different calendar to make it work in ASP.NET with unobtrusive js but ran into serious performance issues because of the lack of DOM2 support so hopefully your solution will save me from having to build one from scratch.

Still I have 2 major requirements. I want to take an existing text input with a date formatted as dd-MMM-yyyy which is our new corporate standard and split it off into 3 fields. Your current example has 3 hard coded fields but I am forced to deal with over 30 databound ASP.Net controls which I would like to simply set the display to none and use it as a hidden field. I hope that your script will let me do that without having to make to many modifications..

It’s great and most of all it’s easy to use. No more onclick-stuff. One thing I miss: a “go to today”-button/link. Also the links to next/previous week are too small (=difficult to click) in my opinion.

You show your latest version is 3.4, but when I downloaded, the comments say v 3.1 still. I want to make sure I get the newest version. Thanks.

Thanks for this wonderful utility.. I’m using it in an open source project, http://esims.sf.net

I must say it has come in very very handy for me.

I suggest you to apply the following simple patch:
——————————————————————————————————————————————
REPLACE (line 45):
loc = scriptFile.src.replace(“datepicker”, “lang/” + datePicker.languageinfo);
WITH:
loc = scriptFile.src.replace(“datepicker.js”, “lang/” + datePicker.languageinfo+”.js”);
——————————————————————————————————————————————
It avoids errors to include language files when putting the datepicker package inside a directory with the same name. IE: /js/forms/datepicker/datepicker.js

I find that when you try to create pickers on the fly using a js loop, the picker buttons are not showing up, Has anyone else reported it ? I can send u some sample code to show what I’m trying to do.

I am having the same problem as Kobus above. When I click on the button, the dateppicker appears at the bottom of the page. Do you know what is wrong there?

Hi, Brian! I’ve a question. How can i do this:
I want to display today’s date in input area. If i do like this:

function initialiseInputs() {
document.getElementById(“feur”).value = “”.$today.””;
...
}

the whole script doesn’t work( I used your reservation script ). Why is it so? May be you could help me to solve my problem?

I look forward to hearing from you soon,
Slava.

p.s: sorry for my bad english… :D

Sorry, but i have already solved that problem. THX!

Excellent Job Dude!....

Appriciate your hard work

Excellent script, thank you
And thanks for fixing the IE7 positioning :)

Okeydoke, back again – the opacity-fading version in IE has a conditionally-created iFrame that has its source specified as ”./blank.html” – which, I’m led to assume, means I should have a “blank.html” somewhere on my site. However, if no source is specified (at least in IE 6+) the iframe will correctly overlay the background, but will not call for the page or throw an error for a source-not-found.

As an XHTML DTD strict attribute, src in iframe is ”#IMPLIED” rather than ”#REQUIRED,” so I think it will still validate… and thanks again, sorry if this was already covered.

Pat Kelley

Is there any way to make the calendar inline with the page and always visible and then make the text input hidden?

Hi

I dont have a public URL to share, but you can just try putting the input field in a for- loop say 5 times , (replace the name and id with the loop var name, ) and call a function that updates a div

I’ll give the pseudocode here

onclick call loopFn()

loopfn:
var txt=’’;
for i =0; i

The previous post dint show up well, sorry abt that…

onclick call loopFn()

loopfn:
assign ‘txt’ null;
loop 5 times txt = txt + html code to create a date picker

Just a comment about the IE fix you have in the CSS for .date-picker-control. Is the “position:relative” for IE < 6 ? I removed this line because if you have a JS in the page which change the height of a div where you have the date-picker, the button moves somewhere on the top left side of the page.

Without this IE fix, the position is still correct in IE6 and IE7.

Hi,

Thank you so much for this superb widgit!

I’m using it in a reservation style form where the user can pick a date but it has to be at least six weeks from today. I’m trying to modify the variable isToday on line 835, I’m guessing that way the user directly goes to that date (six weeks from today) instead of having to click to get to the next month(s) but I can’t seem to change the date (because I’m a javascript noob). I don’t even know if I’m trying to adjust the right piece of code …
Can you help me out?

Thanks in advance!

I’m testing around with the date picker and it works correctly except for IE6. The browser just alert “IE cannot open the internet site http://url, Operation Aborted” and then stops loading the page. I just can’t find out why he’s crashing. Everything seems to be the way it should.

Anybody experienced the same problem or has a solution?

thnx

Thanks! I read your e-mail, got it to work exactly as I wanted … with ease, I was overthinking things I guess. I also replied your e-mail with a thank you and a new language file, a Greek version. Haven’t heard from you so I’m guessing I didn’t get throught a spam-filter or something. I’ve put the file online for you to download at: http://www.ny-medialabs.com/gr.zip
I hope you’ll use it!

Thanks again for you help and this wonderfull script!!

All I can say is Thank you so much for this script!
I’ve been looking for something like this for ages!

Even with a DOCTYPE of XHTML, I’m finding that datePicker is still “HUGE” in IE6. I uncomment the quirksmode section in datepicker.css, and that helps with the font size, but the cellpadding is still too large, and I can’t figure out how to reduce it. I’ve tried adding padding:0;border:0;margin:0 to that .datepicker th td quirksmode section in datepicker.css, but that didn’t have any effect.

What does work is the demo. If demo.css is included, specifically the “body” style, it does work, but I’m having trouble integrating that into an existing complex page.

Hi there,

I’m having a similar sizing problem with the date picker – in IE6, Opera AND Netscape – I don’t do things by halves! :)

I’m trying all sorts of CSS styles to reduce the fonts, table sizes etc but I just can’t get it to work. I am using your datepicker.CSS file on it’s own so it’s not as if I have any other style sheets affecting or overriding it.

My server (running Domino 6.5.3) insists on putting this DOCTYPE at the top …

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

Sadly, because of the quirks of Domino (let alone the IE quirks!) I can’t change the DOCTYPE to be “strict XML”. I won’t even BEGIN to go into why Domino is giving me these problems! :) Suffice to say that I’m stuck with that particular DOCTYPE setting because of the way my version of Domino renders the page.

I’ve tried loading the Demo.css file but get no joy whatsoever, the datepicker is still huge – about 200px wide by 300px high.

Otherwise it works wonderfully! :)

Any thoughts?

I found out what the problem was! Me! :)

I hadn’t noticed the following section in the datapicker.css . . .

/* Common TD & TH styling */
.datePicker table td { border: 1px solid #ccc; padding:0.6em 0.6em 0.6em 0.6em;

I just changed the padding to . . .

padding:0em 0em 0em 0em;

and voilá! The datepicker had changed to a smaller size.

I’m not quite sure how I managed to miss that one. I clearly hadn’t woken up when I was looking at the code this morning.

Keep up the good work!

You can’t select anything under Monday and Tuesday here on the Split Input DatePicker here, http://www.frequency-decoder.com/demo/date-picker-v2/

Was it intentional?

I found it… duh. disable days 12. :(

Thanks for the suggestion on the padding. That helps with the height, but for some reason on IE6 the width is still wider than what is in the demo. (I.e., the only way to get the small size is to include the “body” style from demo.css.)

I’m playing with the reservation demo and I’m wondering how one would go about setting the End date to always be at least one day later than the Start date.

thx!

First thank you for creating such a nice tool. I use it quite a bit. One problem though…you forgot to finish the divider-slash functionality. I looked into your code and noticed you had a case for dot,dash and space but no slash for the “create” class. I simply added this starting at line 960 as it was a no-brainer:

Thanks again!

Will the datepicker someday soon able to be accessible by allowing screen readers such as Jaws to “say” the dates, months, and year while keyboarding through the calendar object?

Update: I think the issue is onkey opposed to hover. Thou I could adjust the code to handle onkey, but before I do I was wondering if you had already updated the javascript file to handle onkey for accessibility folks with screen readers. Please advise.

Hi Brian
This is a great script – thank you.

I would like to have two calendars opened together (with the same click, on the same div, one next to the other ).
I would also need to close the div only when the two dates are picked (for date range).

Could you point me to the right direction on doing this?
Thanks!

Bonjour,
the most effective date picker I ever tried. Honest !
Though I have a request / suggestion : about localisation concerns, what about adding national days feature ?
Actually, it is quite easy to do with setDisabledDates method, as far as it is not a “mobile” national days (see Easter e.g.). Could it be possible to figure a way to implement this in your code ?

Regards.

If you need to use this great date picker/calendar along with json.js (http://www.json.org/) it would be necessary to apply small hack. This file is adding among others method object.toJSONString. In for loops in method cleanUP on line 1092 and destroy on line 1101 datePickerController.datePickers[dp].destroy() when for loop reaches ‘toJSONString’ it would stop executing since datePickers[‘toJSONString’) does not exists.
Solution:
On line 1190and on line 1105 after for(dp in datePickerController.datePickers) { add if (dp == ‘toJSONString’) {continue};

hi, this is great, looks great and works great. Just wondering. Any way to support times as well? even if the returned format will come back with for example 12/12/2007 00:00:00 would help (if there is anything better , better)

hi, like everyone else, i love your date picker – it is beautifully done. i do not know if you are aware of the javascript / parseInt / string value bug, but you can google it to get the full details. I would suggest changing just about all of your parseInt( ) calls to either parseInt( string, 10 ), or parseInt( parseFloat ( string ) ) so that “08” and “09” are correctly parsed as decimal numbers instead of octal numbers. Thanks again for your work!

Hi,
What ‘s method setLowRangeToBeSixWeeksAfterToday meant for? I couldn’t set low – high range until removing it. I’ve spent hours running debugger. :)
btw. reservation demo is not validating: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.frequency-decoder.com%2Fdemo%2Fdate-picker-v2%2Freservation.html
It would be great if you could wrap JavaScript code in head of html page in / / < ! [ C D A T A [ spaces added between characters in order to display code / / ] ] > (lines 7 – 85) and add post or get to method and page would pass validation.
Once again: Thank you for astonishing work!
Goran

Hi I have a problem with the setEnabledDates bit – I get this error:
datePickerController.datePickers[obj.id] has no properties
datePickerController.datePickers[obj.id].setEnabledDates([”****01**”]);

as you can see I’m trying to use the dyanmically created id for the input, there is no way I can use a static ID name – am I missing something obvious here in passing the ID? thanks

Very Cool! This is exactly what I was looking for. One question, however. How can I change the cal.gif graphic from a linked image to a mouseover event? I’d like users to be able pop up the date picker without having to click on it.

Thanks!

@ Frank: Hi Frank, change the line:but.onclick = but.onpress = function() {
to read:
but.onmouseover = but.onpress = function() {
From an accessibility standpoint, you should still keep the onpress event.
F.Y.I: the calendar isn’t an image but an HTML button element.
Regards,
Brian

Thanks for the clarification. Aside from accidentally hovering over the calendar to open it, what downsides do you see to doing it this way. I sense you are trying to deter me from using it this way.

Brian, so sorry, but I forgot to ask 1 more question. Does this calendar consider leap year? I see a function for datePicker.getDaysPerMonth, but I’m not 100% sure if this is for leap year or not. Please clarify.

I’ve been trying to get the sample code for auto show for inp.onfocus to work correctly. It is not. Either I get the calendar to fade away and nothing goes into the text box, due to lost focus, or I can get the date in the box but the calendar never fades away. Actually you can see it go and come back since the field gets focus once again.

Code below: but.onclick = but.onpress = inp.onfocus = function() { var inpId = this.id.replace(‘fd-but-’,’‘); datePickerController.hideAll(inpId); if(inpId in datePickerController.datePickers && !datePickerController.datePickers[inpId].visible) { datePickerController.datePickers[inpId].show(); }; return true; }; inp.onblur = function() { var inpId = this.id.replace(‘fd-but-’,’‘); if(inpId in datePickerController.datePickers && datePickerController.datePickers[inpId].visible) { datePickerController.datePickers[inpId].hide(); }; return false; };

@FD: But of course that it does not meter if demo is validating or not it’s only question of impression made. Perhaps I am too narrow and nerdy but whenever I am looking at some code ctrl + shift + H is pressed first by default. :) If there is bunch of HTML errors I would just close the window and go further on…
btw. if method mentioned is meant to set date six weeks ahead then there is an error: Date is set twelve days ahead.

I’m trying to disable certain months. Where should I add —- datePickerController.datePickers[“dp-normal-1”].setDisabledDates([“200711**”, “200712**”]); —- ? I tried adding it at the end of my local datepicker.js file and also at the end of the inline script file on the page, but neither worked.

I’ll update the download today to fix them both.

@FD: You did it. :)
How shall I send you some translations?

HI
First off thanks for providing a such a good date picker.

I am trying to use the date use the date pickers new split across three inputs feature but I am encountering problems. I am trying to use the date picker with two select boxes (day,month) and a text box for the year. The date picker appears fine however when I select the date, the date displayed in the day,month is 30 days behind that of the one selected.
Is it possible to use the split three like this or should I stick to the described use (which works fine when tested)

Thanks

Hi Brian,

I looked at the source of the demo at
http://www.frequency-decoder.com/demo/date-picker-v2/disableDays.html

I can see what you’re doing there, but it’s not working for me. Here’s the page I’m using the widget on
http://valenciacc.edu/visit/visitsignup.cfm

Any ideas what it could be? Or do you know of any other examples of sites using the widget with specific dates disabled?

Hi
Great calendar! I’m not into programming javascript, but this one is so easy to implement, gotta love it. I wonder if there is possible to make this a flat calendar? Instead of clicking a button, it will display all the time on a site.

Hello,

thnx for this datepicker, I’ve just had some problems with width-height and colorize, but after few minutes hacking css it works fine.

Anyway, here is czech translation for the last version, where is “today” and “show calendar” translated.:

http://upload.avaloh.cz/hlava/cs.js

Avaloh.

Very impressed by how easy it is to implement and customise this date picker, really excellent work. A client we are planning to use it for is requesting a two-month view – do you have an idea how complex the modifications would be to allow this and any pointers before I start trying?

I am just curious if there is a way so that when the input element is readonly, then when you don’t select a Date, it will blank the date box, instead of keeping the previously selected date? I see no way to remove a previously selected date, if I want it to be blank on some occasions.

Eric

I’ve been having a weird issue, and finally tracked it down to datepicker. The problem is that in Firefox (not IE), whenever I reloaded a page, the selected radio button in a radio group would move down one.

This appears to be a bug in Firefox, relating to adding form elements during page creation and how it stores which form elements are selected. But it can be worked around in the datepicker code by using something other than a form element. In my case, I used an a element instead of a button:

if(!document.getElementById(“fd-but-” + inp.id)) { var but = document.createElement(‘a’);

This caused a problem, since a tags are not display as blocks, and height and width don’t work quite right. Switching to a block didn’t work either, since it made it end up on its own line. Eventually, I came up with something nasty that works: (in datepicker.css)

.date-picker-control { padding:8px; width:0; height:0;

This appears to work in both Firefox and IE6, though I can’t vouch for other browsers.

Hi Brian – awesome script this – thanks! One thing I’m stuck on though is to remove the Today button, which is a great feature to have, but not always wanted – our designer wants the month to go where the today button is and for “today” not to be visible at all. Is this possible? I read through all the documentation and pretty much all the comments (did skip a bit and use search towards the end!) but can’t find any ref to this… I’m using the reservations variant, with a couple of tweaks of my own to use image inputs rather than buttons for prev/next month/year. Every time I try to skip creating the Today button, or try some other method, the whole thing fails and tries to submit the form.

I have download the date picker widget.
But there are problems to unzip the file :(

Any suggesstion?

Regards,
MyD

Hello,
I’m trying to use this date picker to enter dates in an input that is displayed using an xmlhttprequest response… so the actual INPUT element is not present on the page until the ajax response has been received.
How should I trigger the script?
Thanks

Hi Brian
Very nice script…I’ve just found something a little odd with split selects for the dates however:

It appears that the script may looking at the selectedIndex or similar rather than the value of the date field as I have found that when I have an initial element with no value as the first element in a select for my date field, the date the chooser sets is one day too early! The Year and Month fields are not affected by the same issue. Should be a simple fix if that is the case i guess?

Also, I am getting 3 “Show Calendar” buttons, one for each select box. Is this something which you have any idea of? I can’t tell why it’s happening, I am guessing I am doing something stupid…I’d post a link but i’m developing somewhere I have to access by using my hosts file. I have added the class name of “split-date” to each select box, would that be correct?

Many thanks for your excellent work!!!

Sorry, me again…

I solved the multiple date-picker issue. It was due to me adding a class of “date-picker” to all my select boxes, I found out it only needs to go on the Year field.

I don’t know if it’s possible or not, I haven’t found out how yet but it would be nice to be able to pass some setup options e.g. the suffix applied to the month and date fields. This is important for me as the rest of my system is built so I am gonna have to hack your Javascript which I don’t like to do as updating to a new version would mean re-hacking. I know that the difficulty is that we might have to manually invoke:

datePickerController.addEvent(window, ‘load’, datePickerController.create);

But I think it’d be worth it…or maybe there’s a way to pass setup vars even after the auto-invocation?

Cheers

I was wondering, can you auto set the date to appear automatically in drop down fields… I tried editing the last demo (1970), but I couldnt get it to work… Alternatively I wanted to keep the drop down boxes empty until selected, but this just moved the auto date selector back one, when the cal icon was clicked on

Hi, this looks brilliant and I managed to get it working “stand alone” fine at

http://www.softopts.co.uk/Web_Sps/Search_Form.php
but when I try and include it in my main form the calendar icon is missing

http://www.softopts.co.uk/Web_Sps/Order_list.php
Sorry I am new to all this, TIA

This is definitely one of the best JS Date-picker out there. Great Job! I love the simple attaching to input fields with CSS class. Very slick.

I have a multi-step form situation where all values are stored in a session and carried over to the next/previous step. When I fill out the dates and come back to this step from a following step, the date-picker resets the preset values. How can I avoid the previously entered dates being erased? I took out the initialiseInputs() function but it did not help.

Any help is greatly appreciated.

Thanks.

Thanks for your reply.

That is what I am doing but for some reason the date-picker seems to reset the values. All other form fields keep carrying their values except the date fields. Once I take out the date-picker (or disable JavaScript) it works fine. I have a form class that does the validation and output of the form dynamically.

I appreciate your help.

Regards,
Chris

I would like to add that I am using the same functions, makeTwoChars(inp), initialiseInputs() and setReservationDates(e), you use on the reservation demo. I thought that initialiseInputs() might be causing the problem but it does not seem to make a difference.

I apologize for my ignorants but my knowledge of JavaScript is rather basic.

Thanks. Superb date-picker though.

Chris

Firstly, the datepicker is brilliant. Being able to, with a class, tell it to restrict dates to after today was just what I needed.

I have been tasked with finding a way to reformat the date. Due to the way that different places format the date, I want to format the date as follows:
23-Oct-2007

Could you tell me the places that I would need to edit to create a different format? Or, alternately, can the datepicker be associated with a hidden field so that I could just javascript-up a non-editable text input to show the format I want?

Thanks

When using setDisabledDates, I can still select those dates (in your onUpdate demo). Is that intentional? Clicking on the dates is intercepted, but not pressing [Enter] after navigating there by keyboard.

Hello,
got everything working, but now I’m trying to find a way to trigger some custom javascript function when the date is changed, and I haven’t bee able to figure it out yet…
The thing is I’m using a dual-datepicker (with linked min/max) in one part of the page, and another single one in another part of the page, and I need to have the datepickers to each do something different when a date is changed…
Any hint?

Thanks!

Thanks for the quick reply…
I’ve tried doing as you say, here is some sample code:
datePickerController.onchange = function(dp) { alert(“updated!”);}

but this doesn’t work… using .onupdate DOES work, but it triggers the function BEFORE selecting a date…

furthermore, how do I set different actions to trigger for different datepickers on the same page?

Thanks.

Ha ha! got the first bit… in your code there was a line missing in the returnFormattedDate function, namely this: if(“onchange” in datePickerController && typeof(datePickerController.onchange) == “function”) datePickerController.onchange(o);

instead there is this:
if(elem.onchange) elem.onchange();

which does not seem to do much…

so, seems like adding this bit does the trick ;-)

Silly me!
Because I am using a dual-date picker with linked start/end input fileds, the start field is initialised in an external script using document.getElementById(“dateFrom”).onchange = setDateRange;
so it was always replacing whatever “onchange” value I was passing it with “setDateRange”.
Again, thanks for the great help and sorry for the stupid questions ;-)

hi… this looks great and I really have no business monkeying around with it.. but I hope i can get it to work. I have a real basic question (I think)... how do I get the form to call the selected date up and send that info along with the rest of my form? i am using a php sender with this code:

if($_POST[‘first_name’]!=’‘ && $_POST[‘last_name’]!=’‘ && $_POST[‘e_mail’]!=’‘ && valid_email($_POST[‘e_mail’])==TRUE && strlen($_POST[‘message’])>10 ) { $to = ‘me@gmail.com’; $headers = ‘From: ‘.$_POST[‘e_mail’].’‘. “\r\n” . ‘Reply-To: ‘.$_POST[‘e_mail’].’‘ . “\r\n” . ‘X-Mailer: PHP/’ . phpversion(); $subject = “Schedule a session”; $message = htmlspecialchars($_POST[‘message’]);

sorry to bug you. .. I figured it out. Thanks for sharing this !!

It’s “silly question boy” again ;-)
I need to use different calendar icons for different datepickers on the same page… how can I do that?
Thanks.

Is there anyway I can make the date picker allow for the selection of dates in the past? By default they are non selectable and I havent been able to change this by tweaking the code.

Thanks for that.

I’ve hacked up a version to display the date in the day-three letter month-year ( 11-Nov-2007 ) format. If anyone wants to have a look at it, I can zip it up and upload it. The changes I made were to a version older than the current( 05/11/2007 ) one, though.

Hi,

Came across an ‘error’ while getting my site validated.

899:
// Table headers
var lnk, d, butt;

Later on you use the var but, which is not declared.

Cheers,

Leo

PS: Great script btw

Hi
Awesome date picker, many many thanks!

Silly question i know, but how can I remove the “Create New Input” Link?
i’ve rtfm, maybe i’m missing something?

I update language pt.js.
Where i send this update?

Hi!
Lovely design. I translated it into Japanese. Please email me for the file.
Chris
Japanese Translator
www.wasabiyaku.com

Hi, i have one question. I need to set an onchange event handler…
I’ve read your Comment 286 and tried it, but it won’t work:

I’ve insert
<script type=“text/javascript”>
//<![CDATA[ datePickerController.addEvent(document.getElementById(‘arr’), ‘change’,changeDepDate);
//]]>
</script>

The input box which calls the picker has the ID ‘arr’.
What am I doing wrong?

Thank you for the wonderful script,
Alexander

Hi, i have one question. I need to set an onchange event handler…
I’ve read your Comment 286 and tried it, but it won’t work:

I’ve insert
<script type=“text/javascript”>
//<![CDATA[ datePickerController.addEvent(document.getElementById(‘arr’), ‘change’,changeDepDate);
//]]>
</script>

The input box which calls the picker has the ID ‘arr’.
What am I doing wrong?

Thank you for the wonderful script,
Alexander

Thanks for reply.

I did not get it working.

I’ve created a demo too. Just replaced my input form (date is splitted in 3 select boxes) and changed the ID of the JS

http://alexander-feil.de/datepicker/

It would be great if you could look over it, when you have some time left…

Regards,
Alexander

P.S.: Sorry for last post. It previewed correctly but submitted wrong. Don’t know what was wrong…

Hi Brian,

I’ve tried many different ways, and surely I forgot the one bracket.
The trick was adding the “window” object to the init line. I thought the input could be accessed directly.

Thanks for support. Now, with your corrected line it works perfectly.

Thank you!

Regards,
Alexander

Hi,
I dont use this script but translate Turkish language.
Thanks for code.

Download Turkish language:
http://rapidshare.com/files/71436275/tr.js.html

Note: Sorry bad english.. :)

Hi,

I have another question.

Is it possible to manually set the language?
I’ve read that i can disable the autodetecting of the language. But i would like to set it “by hand” ?

Regards,
Alexander

Hi Brian,
I’ve been reading the comments but I’m still a little unclear on the license details. My interpretation is that we should get your permission to use the date-picker? I’d like to use it on a couple of forms on a university site. I was going to email you but could not find your email addy.
Cheers,
Allan

Hi Brian,

it would be nice if we could switch the language with adding a class to the object which could be changed interactively from the user. If a user switches the language on the site, the datepicker switches the language too.

I tried it myself, but my JS experience is tooooo small to get this working. I’ll try it next week if i have a bit more time…

Regards,
Alexander

Hi Brian,

I found a bug in IE6 and IE7

When input field with datepicker is inside div with overflow defined to auto and scroll page the calendar icon scroll together.

This issue happen in demo provided with datepicker download kit as well.

Thanks.

Hi Brian,

You don´t understand me, i know the datepicker calendar scroll with page, but the problem is, datepicker ICON scroll with page in IE6 and IE7, in Firefox don´t scroll.

Thanks.

Hey,

First off brilliant datepicker, very slick! I;m using it on a site and am having a little display error in IE7. The form containing the datepicker is hidden using css and displayed via mootool slider effect. The icon for the datepicker is showing up when the form is hidden…is there some css applied to the icon that would effect this.

The url where bug.

http://www.shoppingbrasil.com.br/datepicker_bugIE.html

Thanks

Brian,

You can see the problem at http://dev.notely.co.uk/problem.html. The form in question slides out when you click the add course button. It shows up in IE7. I think it should be fairly easy to spot. I think the easiest solution is to set visible:hidden on the buttons in css and then when the form is toggled set them visible again.

hello, firefox generated an erron when including .js in my page
Index or size is negative or greater than the allowed amount” code: “1
may you help me ?
thx
(sorry for my bad english)

Hi could you tell me how to pass a variable in the disable dates method? It just won’t have it any way I try – here’s the line:

datePickerController.datePickers[obj.id].setDisabledDates([“20061225”, “****1231”, “******01”]);
This returns the error ‘datePickerController.datePickers[obj.id] has no properties’ -the obj is the textbox that’s dynamically created to put the resulting date into. I tried using alert(obj.id); and it does show the correct id. I can’t just put a static id in as they are all random

thx for your response. I ‘ill send you the source code generated by my page because I can’t make the link public. It’s on my company’s Intranet.
Regards,
Nas

Hey Brian,

Thanks for the advice, am upgrading to the latest version now. Changing the CSS worked wonders.

Hi Brian,

Maybe I’ve found a bug: when I try to use the setDisabledDates() method, dates below the 10th of the month won’t be disabled!
E.g. setDisabledDates([‘20071208’]) will not work, but setDisabledDates([‘20071211’]) will!

This is because the var ‘dt’ contains 8 and not 08 as is should have.

A simple
if( dt < 10 ) { dt = ‘0’ + dt;
}

on line 972 solved currently the problem for me.

I’m using version 4.2.

Hi Great Script, unfortunately my java knowledge isn’ that good ;o( I’m trying to figure out how i can have the datepicker open another page when i click on a date, passing the date as a url-parameter. For example: if I click 24th December 2007, a page called index.php?id=24/12/2007 opens.
Any help on this will be greatly appreciated!
Thanks
Frank

Very nice picker, Good Work! I have one problem, When i use AJAX to create a new div i can’t use the Date-picker. No calender icon, nothing appers. Maybe there is a trick to get i work?

@Sammy J, I just had the same issue and tracked down this earlier response to Yves. It worked perfectly for me.

Thanks for the script, Brian. Good stuff!

Hi, great work. Just a quicky suggestion: perhaps you could check for hidden inputs before calling .focus() on line 1079 (as you are doing on line 817) otherwise IE6 throws an error when using a hidden input to store the returned dates from the calendar.

This is great! Very simple. Is there is a way to make Sunday appear on the left of the calendar, next to Monday, instead of on the right, next to Saturday?

Awesome! I will definitely press the “donate” button.

For the version using drop downs for “month” and “day”, is there a way to have the first button option read “Month” instead of default to “January”? If I start with an option for “Month” and a value of “-1” the date picker is a day off.

Hope this isn’t a dumb question :)

Thanks!

John

Hi Brian,

wow, Great Code !

i’m definitely using it now.

Would you know how to do not a date-picker, but a duration-picker ?
Like, i want to be able to select a duration of one year and one month ?

David

hello,

can you tell me please where i can change the option that i can see the first two letters of the day? Under TODAY i can see the day of the week “m t w d f s s” i want to make it in “mo tu we th fr sa su”. In the script its may the stringoperation on line 376 but im not sure. Can you help me please?

B R

Till

do you plan to support keywords?

like, “next month”, “7 days” (from today) and so on

This is neat, but the fact that widget is misspelled bothers me. It would really improve the otherwise very professional-looking site if this were fixed.

Hello there, I have translated the en.js into Bosnian. However, I cannot see an email address I can send it to.
Let me know where you would like me to send it.

this is really cool … is there a time companion for the date picker ?

Brian,
Call me an idiot but I think Mark Thomas is correct. I believe “widget” is the correct spelling but your page header is “widgit”. It doesn’t bother me like it does Mark but it might effect your search rankings.

I’m having trouble combining the functionality of range-low-mm-dd-yyyy/range-low-today/etc with split-date and select boxes.

It’s a rather strange issue, actually… If I set an explicit date within the range of what my select boxes display, then I get nothing. If I set a date outside of the range of what my select boxes display and datepicker.js has to correct the date, then it works. I’m going to dig deeper into the script, but I wanted to let you know that there is bug. If I arrive at a patch, i will notify you.

Greetings, more on my issue. I’ve found that it is specifically when using range-low-today and range-high-today. For whatever reason, it determines that range-low-today’s result is not within the range of the select boxes, and then resets the range-low to the earliest date in the range.

This is possibly related to the fact that the values in my options do not contain leading zero’s which is a biproduct of using the rails library provided by Brian. However, after modifying his library to add padding to 2 digits, I still do not have a working range-low-today.

My search continues…

Epiphany… You intentionally set the range to the full range of the select boxes so that the ability of the form widgets coincides with the ability of the calendar widgets.

Please disregard my bug report. I hope my messages help others avoid the same pitfall.

I’m with Mike ( Comment #346) ~ any thoughts on a time component?

Think of reservations at a restaurant or appointments at the hairdresser …

Thank you

This is terrific. First, congratulations and thank you!..
I’ve costumized the css easily and calendar is working like a charm. But I need some modification, by the way I don’t have enough javascript knowledge. I thought, maybe you might help me about the modifications that I want to do. Because I’m sure there is a easy way that I don’t know :)
So, I would like to use this calendar as a “event manager”. I wonder, can this calender show the spesific dates as “marked”. For example we have 23rd march 2008 as our date. I’m using php based system on my website and if user has an event on that day(s), can the calender take the information from mysql and show the day marked dynamically? of course if it can do that, it should show as marked all other dates which have an event.(or spesific other dates). And when user click that marked day, can it trigger a new page? (actually I saw a event listener function that you wrote in a comment)

I’m sorry to ask those questions, because you have done a great job and I’m asking for more, but if you help me it’s gonna be great :)

Thank you for your help.

Is there a way to have the date default to today’s date in the text box, and then if the user wants to select another date, they click the picker?

Hi, thanks for this wonderful widget. Can you please tell me how do i make the default year 2008 instead of 1970, i want the calendar to show from current year onwards, please email to me at abyssdome@yahoo.com as soon as you can, you help will be highly appreciated.

thanks and keep up with great work.

HI,
I have a little problem with your calendar.
The are like : Lundi-Mardi-Mercredi-Jeudi-Vendredi-Samedi-Dimanche
But why : Lundi-Mardi are in red and not Samedi and Dimanche
Is it because my OS is in english and i lived in belgium.

Regards

Bug Report: hi, thanks for this great date picker, I have a problem when I have some flash on the html page the date picker goes under the flash! I think there should be a configuration to make the date picker display on a specified position or make it always appear down the text field or something else, please tell me how can I make it always appear down the text field?!!!

Hi there

Is it possible to attach a txt file to load datas from it? I want it to check if a note is attached to the date and if there is then it would show the note opened in html. thx for helping.

I have changed firstDayOfWeek to 6 in the en.js file, however it doesn’t appear first in the list. What have i done wrong?

Thanks for the fast response. Actually, you know what. It does not load properly. I get a 404. I need to change the base script URL or something. My datepicker is here: www.domain.com/includes/datepicker/

Thanks.

What I ended up doing is commenting out the following lines:
//var loc = scriptFiles[scriptFiles.length – 1].src.substr(0, scriptFiles[scriptFiles.length – 1].src.lastIndexOf(”/”)) + “/lang/” + datePicker.languageinfo + “.js”;
//script.src = loc;

then added explicitly:
script.src = “/includes/datepicker/js/lang/en.js”;

Seems to work now. I did have another question. I tried playing with the stylesheet, but had no luck. I’m trying to make this a bit smaller. It’s rather large. Is there a more compact stylesheet? All I could do is resize the height, but the width wouldn’t resize. any ideas?

BTW, thanks. This is pretty cool.

Hi, VERY nice control however when I do a postback on the page with smartnavigation set to true (IE) the calendar icons disappear. Any ideas???

Yep ….. I was kinda expecting that reply! It really grinds me that my employers insist on using .net v1.1 …... oh well!

Thanks for the prompt reply.

still stuck with this issue – i’ve done away with smartNavigation now, however is there a way that I can persist the Date in the textbox during postbacks? I’ve tried saving the date into the viewstate and also as a session item but It doesnt seem to fly.

Me again … and hopefully for the last time!
I’ve managed to persist the date from the textbox (it was doing it all along I just missed it because the textbox clears the values. I added a label and that now holds the correct date.)

My question is now – How can I stop the textbox from clearing the date when the control loads?

Currently I am doing the following:
1. I am storing the value in a session object during postback.
2. In the Render event I am trying to set the textbox.text to the session value. (This works fine for the label but not the textbox!)

Is the javascript that controls the datepicker clearing the textbox??

OK … I found the problem! In the javascript I had copied and pasted the example off the website…. I should have looked at this sooner! My problem was being caused by the // document.getElementById(“sd”).value = “”;
I’ve now removed both instances of this and now I can start to regrow the hair I have torn out over the past two days!

I need to have the same functionality as the reservation date demo, Is this possible by just using classes? I’m not a java programmer so to speak so I have to try and work stuff out from snippets!

I’ve translated the picker to a language that is not supported. How can I send you the file ?

How would I write a statement that calls a function when any Friday is picked? It seems like this should be a simple if statement, I just haven’t figured out exactly how to write it. ... For example, I am trying to set up the widget so that if a user selects a date which is a Friday, the following function is called
.
function updateTime(id) { document.getElementById(id).style.display = ‘none’; }

I think I have discovered a bug.

If you have the year as a select box, the date range options don’t always work as expected.

I have three drop-downs for day/month/year. I have set the following class on the year select: “range-low-2007-12-30 range-high-2008-02-17 split-date”. The ids on the month and day are correct, and the datepicker fills in the values correctly when selected.

Now in theory, the datepicker should limit me to 30/December/2007 to 17/February/2008. In practice, the start limit is fine, but the end limit is exactly one year from the start limit.

If I change the Year field to a text field, it works as expected.

My guess is that there is an odd interaction between the year check on the selectlist, and the date range code.

I am using FireFox 2 on Mac OS X. Email me if you would like sample code demonstrating the bug.

Thank you, and you’re welcome. :)

Fantastic script… integrated into an existing test page, containing several other, quite large scripts with no problems what so ever. I’ll be using this in my next project for sure. Thank you so much for this one!

I really love this control — and I may have overused it. I have a page that has 27 of these fields/controls on it, and it takes 10s to load now.

Am I misusing it? I wanted to that test theory first, and so I created a version of your demo page with just 25 simple date-picker fields — and it took almost 9s to load — ~1s with one.

Has anybody else run across this? I paged through the comments and didn’t see a mention of it, but may have missed it.

Thanks
pov

I would appreciate some help on an issue i’m having at the moment using the date picker “a la” Reservation Demo:
I have a start and end date text box and a dropdownlist. When the user has selected the dates and selected an item from the dropdownlist, a datagrid is displayed.
The code works fine for the first time a user inserts the dates, however after the datagrid has been displayed the date checking in the reservation code does not work anymore (ie the user can pick an end date that preceeds the start date).

I am using ASP.NET and viewing in IE7.

Found the issue! I had enabled AutoPostBack somewhere along the line and that was overwriting the change event. Removed autopostback and app works as expected!

Hi, I’m using FF 2.0.0.12 — I’ve installed the Live Headers plugin, but I’m not sure what I’m looking for. Help?

Thanks.

Hi,

This is a very nice and helpfull tool. In my page the input form is in the bottom and the datepicker table is 80% unvisible without scrolling. So how can i change the position of the calendar ? Can it be opened “Uper Right” of the calendar icon ?
Thanks for your help
Olivier

Hi Frequency Decoder,
Have a look on the following link (French Site)
http://club.gazailes.free.fr/S1/Pages/index.php?page=KI_VOL.
Another question. Is it possible to reduce the calendar size ? How ?
Thanks
Olivier

A very good tool, and very well explained.

One question : how to initialise the date ? I’ve taken the reservation demo, and I want to intialise the end date to today’s date and give 3 days back to “start date”.
And I’m not able to do that …

Et très bon français, by the way !

Is possible a multiple days selection?

Brazilian Portuguese:
Digo, é possivel iniciar o datePicker com várias datas selecionadas (vinda do banco de dados, por exemplo)?

English by Google:
I say, it is possible to start the datePicker with several selected dates (from the database, for example)?

Thanks a million =D

Hi!
I wrote that the functions needed:

datePickerController.datePickers[“the associated input id”].setDisabledDays([1,0,1,0,1,0,0]);
datePickerController.datePickers[“the associated input id”].setSelectedDates([“20080326”, “****0328”, “******18”]);

Thanks for your help!

Sorry…

datePickerController.datePickers[“input”].setSelectDays([1,0,1,0,1,0,0]);
datePickerController.datePickers[“input”].setSelectedDates([”****0328”]);

Sorry, frequency-decoder (don’t have a better name ? ^^), I’m not good in javascript… Just discovering this language…

Anyone who could help and write the piece of code ?

PS : you lived in france, wow ! Me too, once… :))

When using this widgit on Ajax interfaces, where some partials of the document gets re-rendered very often, the calendar buttons are lost. This happens even if we call the datePickerController.create() method.

On older versions works perfectly, because the create() method create the buttons. On v4.4, it checks if the calendar, (not the button), exists. If it exists, stops the action.

I’ve solved it putting next piece of code on the create() method of the datePickerController object:

if(inp.id && document.getElementById(‘fd-’+inp.id)) { if (inp.id in datePickers) { datePickerController.datePickers[inp.id].createButton(); } continue;
};

Instead of just:

if(inp.id && document.getElementById(‘fd-’+inp.id)) { continue; };

It calls to the createButton() method, (who checks if the button exists or not, and put it if it don’t exists).

I hope this to be as useful for you as it has been for me. Thanks for the widgit :)

hi, everybody,
i’d like to reduce the size of the frame (or ‘box’(?)) in which the fieldset appears – can anyone help me with how to do this? reducing the entire width of the box about 4 times would be perfect!
Anya

Actually I already have the dates, using sd & ed as arguments (method GET).
I can convert sd and ed in timestamps.

Isn’t there any easy way to get it from there ?

Don’t worry if you don’t have time, just forget it.
Thx

I am using Reservation calender. I want to set Dynamic date range. how to set Rangehigh for those two calenders.(Ex: today date is 04/02/2008. I want to set Rangehigh as 04/02/2009).

In which function I call that Rangehigh. If I call that code in SetReservationDates function. but it’s working when I click the calender. I want to set it in first time itself.

Hi Brain

Hi Brian, You done excellent job but some bugs are there. i downloaded ur code and tested in IE but it doesn’t show the calendar button. I saw a msg came up that showed popup blocked. how can i prevent it and show the button… clarify me brian…

Hi, this script is excellent.
I need to disabling dynamically dates form an array and more than one per week, this is possible or what I need to modify?
Tks in advance

Hi, its me again… can any explain me where can I add an area to put some text below of calendar.
The idea is this, when you put the mouse over a special date, for example St. Val’s Day; I like to sow below text.

Please help me with that.

Hi Brian,

Just to say that your calendar widget is one of the best I’ve seen around, and also to mention that it’s now also featured in our columns.

Keep up the excellent work!
—Marc (from The Art Company)

I was wondering if you could help me. I need to fire the datepicker on mousing into a text field as well as clicking on the calendar graphic. I know I can use a mouse event (onClick, onFocus) etc, but I do not know what to call.

Hey there…I’m testing the date-picker widget and wanted to know if there’s a way to modify it to allow for a short text format for the month (i.e. JAN, FEB, MAR) instead of the numerical value?

Think I found a little bug in datepicker.js
At line #1420 IS:
Update by f.d: Hi Pawel, thanks for the bug report and sorry your code got mangled by textpattern! I’ll update the source a.s.a.p.

Hello, I’m sorry for my bad english.
I try to change my IE language settings into English language (In french by default for me) but the calandar dont’t change*. It rest in French…. but I need it in english (or german, or other) Is it possible to force the selected language ? If possible, I preffer not use the no-locale function because it will be displayed in english only… and my application should be in german, french, english and other…
thanks for your help
regards

I have a reservation form that needs to have the reservation demo split across three input fields. Can you do this?

Also the big problem i am having is it has a hidden field that is the number of days calculated based on the dates you select. So this hidden field would have a number or how many days you would be staying.

Anyone help me with my problem? I would be forever in your debt!? :)

Hi,
It’s really nice datepicker. I like it. And I want share with you my Turkish language file, however I really dont know how to send. I wrote here url of the file: http://www.karadenizdiyari.com/js/tr.js
thanks

Hi there, Thanks so much for this beautiful date picker! I am trying to use this on one of my sites, but I’m having trouble getting it to work properly.

Keeping in mind my JS knowledge is near zero, I wanted to play around with the demo page included in the zip file first to get a better grip on how to output the date in the format I need. To that end, I changed the .html to .php, and added some very simple and crude PHP code to it, to display the values of the date fields if the form is submitted via the Submit button (using POST).

This works fine for the single field, but for all 3 of the split-date fields, it only returns the year, it seems to totally ignore the date and month fields. I’m probably overlooking something very basic, but any help would be very much appreciated! Here’s the test page I created – you can see what happens if you submit the form:

http://maaike-annegarn.com/date-picker/index2.php

What am I doing wrong? Thanks in advance for your time!

the missing german translation are

today – Heute
show calendar – Kalender zeigen

cheers
susan

I would like the calendar to appear when someone clicks on the text field in order to prevent them from typing in a date manually. What would I add to the field’s onclick=’‘ to make this happen?

I have a small IFRAME with an input enhanced with this datepicker.

As this IFRAME is very small, the calendar doesn’t show up.

Is there a way to make the calendar appear outside the IFRAME, on the parent page?

I am loading the date picker / form through JQuery and half the time it does not load the small calendars next to the fields. Sometimes it does and sometimes it does not.

Is there a way to force the small calendars load or attach themselves to the field when the page loads?

Or is there a way to not have it apply the small calendars to the fields and use an icon and on the onclick for the icon i have datePickerController.datePickers[‘anidhere’].show();?

I am splitting the date between 3 fields though sd, sd-mm and sd-dd.

I currently have this as my input fields

/MM

input type=“text” class=“w2em” id=“sd-dd” name=“arriveDay” value=”“ maxlength=“2” />/DD

YYYY

really what i want to do is have my own calendar icon next to the fields and when you click it it opens the date window and then fills in the 3 fields with the month, day and year.

So you would have

Month Input ID(sd-mm), Day Input ID(sd-dd), Year Input ID(sd), Custom Calendar Icon with onClick to show calendar

Hey, I love the script. You know how in firefox it shows the border around the calendar? I was trying to figure out how to stop it and if you add: outline:none; under div.datePicker in the css file it fixes it. I bet a lot of people know this, but it might help some people.

Also, if I want the calendar to just execute a php script upon clicking a date (not using an input field) is my best option to set the input field type to hidden?

Thanks

Brian,

Great Script!

I was wondering is there a way when using the three text box method, to have the year entered in two digit instead of 4?

I am using this in an existing program that was written by someone else and the date picker works great except that the program does not recognize a four digit year. So I can use the date picker, but then manually have to remove from the text box the 20 from 2008.

Thanks
Scott

Creating static datePickers

If you wish to have the datePicker always displayed on-screen i.e. with no activation button; just add the class no-fade to the associated input.

I’m new to web design, html, javascript, etc.

Currently muddling through, getting what help I can from the net, and achieving some satisfactory results, until I hit this problem.

I appreciate that I need to put the effort in to reap the rewards but the reference above, adding the class no-fade, suggests that this may be a relatively simple thing to do.

Would appreciate any help you may give.

Hi,
I’m really new at this and I’m having a problem. Hope someone can help me.

I disabled some days in the calendar, but if I introduce this date manually in the input it doesn’t reject it. So i tried to disable the input, but when I did this the calendar was automatically disabled as well.
So my question is: is there any way I can make the input reject disabled dates, or in the worst case if there isn’t, how can i block the input without blocking the calendar?

Thank you,

PS. sorry if me english is not that good, but it is not my first language

Hi –
I’m having trouble getting the datepicker to show up when I rerender part of the page. Under some circumstances, I use js to update part of the page with a new partial and the datepicker doesn’t show up in the resulting partial. How can set the script to rerun when I render a partial?
Thanks!!!

Brian,

What a piece of work! Wow, you have my respect. Especially with all of that conditional compilation for IE!

I have been implementing some modal-ish dialogs in my Rails app (something along the lines of RedBox), and want to display the calendar in them. It took me a while to realize that the calendars, and therefore the buttons, are initialized on page load. Once that dawned on me, I was able to call the datePickerController.create() method manually and get the button to display and the calendar to work. Yay! But since the datePickerController is intended to be initialized on page load and deinitialized on page unload, it’s not quite ready for use in a modal dialog that might be opened and closed many times for various reasons without reloading the page. I did, however, come up with a simple solution the problem, and I submit it to you to consider for inclusion in a future release.

datePickerController.create() begins by initializing datePickers to an empty hash (I guess that’s what it is):

var datePickers = {};
var uniqueID = 0;

When datePickerController.destroy() is called, you set datePickers to null. So the problem that I encountered seemed to be in addDatePicker when the code checks to see if inp is already in datePickers. Since datePickers is null, I’m guessing an error is getting thrown and the whole thing is terminated. To resolve the problem, I added the following to the beginning of the addDatePicker function:

if (datePickers == null || datePickers == undefined)
{ datePickers = {}; uniqueId = 0;
}

So whether the script is being used via page load or called manually numerous times in a modal dialog, datePickers gets initialized properly and it all works as advertised.

Thanks again for such a great piece of work!

Peace,
Phillip

I was so excited last night because I had this working correctly, I woke up thinking about it. It’s kind of funny that in my “just waking up” stupor, I thought of a problem that I missed in my “I really need to go to bed” stupor.

I failed to mention in my last comment that I call datePickerController.destroy() when I dismiss my modal dialog, which is why I needed to alter addDatePicker to make sure datePickers was initialized. Doing this will only work correctly on pages that do not have date pickers. If I have a page with a date picker, and display a modal dialog with a date picker, upon dismissing the modal, all date pickers on the page will be destroyed and removed. Not at all what I want.

I’ll keep working on it. I’m sure there’s a pretty straight-forward way to do what I want. I just need to read through your code some more. I’ll post when I have a more viable solution. Let me know if there is already a way to accomplish what I’m after.

Peace,
Phillip

Hi,
Great calendar!

I need something very similar to the reservation example. But, I would like the start and end date to interact a bit different.

When end date is blank I would like it to be set to start date + x days when start date is picked. To set the end date equal to the start date is simple, just set the value of the input field equal to the start input field. But how can I increment with two days? Is there functionality for this?

Similary, when an end date is present, and new start date is picked, I would like the end date to be set to the new start date + x days if the new start date is after the end date.

I hope you can help me with this. It’s all I should need to be able to use this nice calendar in my web application.

Best regards,
Sebjørn

I believe it is working the way I want it to now. To recap:

I am implementing modal dialogs and want to use the date picker on them. The datePickerController, however, is coded to create and destroy date pickers on page load and unload, and displaying a modal dialog with AJAX-acquired content meant that the datePickerController already did its thing long before the dialog was displayed. My first attempt was to call datePickerController.create and destroy manually when I show/dismiss my modal dialog. This worked, until I realized that I might be using modal dialogs on pages which already have a date picker, and my method would wipe it out. To get around this, I modified the datePickerController.destroy method to accept an object and destroy only that one. I considered creating a new method called removeDatePicker, but felt that since datePickerController.create() can be passed a single object, extending destroy to do the same was more consistent. I also experimented with calling destroy directly on the datePicker, but that left the datePickers collection in a state in which I could not create another one of the same object_id (as in the case of redisplaying the same modal dialog). All in all this has been somewhat of a fun, albeit frustrating at times, exercise. I have an incredible amount of respect for you, Brian, for all the work you put in to this thing. I know it’s not much, but I’m going to head over to PayPal and give you a little something. The least I could do is buy you lunch.

Here are my changes to datePickerController:

var addDatePicker = function(inpId, options) { if (datePickers == null || datePickers == undefined) { datePickers = {}; uniqueId = 0; }

if(!(inpId in datePickers)) { datePickers[inpId] = new datePicker(options); };
};

var destroy = function(inp) { var dp; for(dp in datePickers) { if (inp && datePickers[dp].id != inp.id) continue; if(!datePickers[dp].created) continue; datePickers[dp].destroy(); datePickers[dp] = null; delete datePickers[dp]; };

// only destroying one, so we’re done if (inp) return; datePickers = null; datePicker.script = null; removeEvent(window, ‘load’, datePickerController.create); removeEvent(window, ‘unload’, datePickerController.destroy);
};

In my own code, I call create_datepickers and destroy_datepickers when I show and dismiss the modal dialog. I’m also thinking that I will to do this if I update the content of the dialog without dismissing it (which would be the case in a form wizard).

function iterate_datepickers(func)
{ var date_pickers = $$(’#dialog_div .split-date’); date_pickers.each( function (e) { func(e); } );
}

function create_datepickers()
{ iterate_datepickers(datePickerController.create);
}

function destroy_datepickers()
{ iterate_datepickers(datePickerController.destroy);
}

Sorry for the formatting of the code. I tried everything I could think of (and even what a Textile quick reference page told me), but can’t seem to get the code to look like code. I also removed the conditional compilation statements from the destroy method, but only for this post. They are still in the actual code.

Peace,
Phillip

This is a lovely piece of work. I found via a link from the Cake PHP world:
http://bakery.cakephp.org/articles/view/using-the-unobtrusive-date-picker-widget-in-cakephp

This brief overview describes how to build a Cake site around your tool, but is not helpful for those of us with existing sites. Additionally, the field naming conventions for date-picker are at odds with some Cake naming conventions. Cake has view helpers that generate split date fields, and these fields’ ids are appended with “Month”, “Day”, “Year” rather than “-mm” and “-dd”. Renaming these fields would break all sorts of nice Cake features.

If I modify your code to work with the split date fields in Cake (more specifically, the Cake HTML Helper), would you object to me posting the modifications to http://bakery.cakephp.org ?

Hi there, thank you for this great date picker!

I’m not a very pro at Javascript and I’m not sure if it could be done. I’m trying to make the date picker popup automatically after an AJAX call. I am using something like this once the AJAX finished loading:

datePickerController.create();
datePickerController.datePickers[‘theIDHere’].show();

The browser always say the 2nd line of script “is undefined”, but the button is working (showing the picker once clicked). so I assume nothing wrong with the .create() script. The text field is loaded into the HTML by .NET AJAX but I’m not sure if this is the real reason. Just want to check if I’m using .show() method properly.

Polish translation: