OO-based Dropdown Date Picker

[glenngv]

Inspired by this (http://www.codingforums.com/showthread.php?p=219435).
Tested in IE6 and Firefox.
Comments and suggestions are welcome.

[OzRoy]

Can I ask why you didn't just extend your number spinner to do it?

[glenngv]

Never thought of that. I just based my code from the original thread I linked. Merely addressing the problems encountered in that thread.

BTW, the date spinner you created that extends the number spinner does not work in IE because the onchange handler in the month and year fields is not invoked when the values spin.

[Saz]

Inspired by this (http://www.codingforums.com/showthread.php?p=219435).
Tested in IE6 and Firefox.
Comments and suggestions are welcome.

Hi Glenn, You've really got me interested in this stuff now!!

is there anywhere that I can see that in action please?

[glenngv]

Just download the attachment and rename it with .htm extension.

[Saz]

Many thanks Glenn.

[Saz]

Hi Glenn,

Hope all is good at your end. :thumbsup:

Is there a quick way to adapt that script, so that previous dates can't be entered and so that when there's a start date and a finish date, that they can't accidentally enter a start date after the finish date please? Also for the weekends in the dropdowns to be in another color please?

Any help appreciated.

Saz.

[APSON]

The number of days is only corrected after onchange of the month...wouldn't have noticed this if it wasn't February :)

[Saz]

Many thanks, but it seems to still give previous dates as well ;-(

[glenngv]

The number of days is only corrected after onchange of the month...wouldn't have noticed this if it wasn't February :)
I've fixed that. It calls onchange onload so that the default selected month has correct number of days.

Saz, I've added compareDate() function to the DropdownDatePicker object. Sample usage is included in the code. The actual validation is outside the scope of this script but it has that function to compare dates between two DropdownDatePicker object instance.

See the attached latest script below:

[Saz]

Many thanks Glenn, I'll give this a try.

It's much appreciated.

Saz.

[bjawnie]

Hi,

I have recently been using the "DropDown Date Picker" script and noticed that the "setDisplayYears" function gives problems with some FireFox users.

To some FF users the "year" dropdown field will only contain two numbers (actually two zeros I think) which is very confusing and in my case couldn't be validated.

It is quite easy to avoid the above situation by simply not to use "setDisplayYears" and then code the years dropdown manually.

A small price to pay for such a nice script :thumbsup:

[jay3000bc]

I have checked out your code and found that it does not display the days of February correctly when initialized. It works only for onChange().

Here is the correct code for all your requirements.

(1) It will display dates correctly for any month any year.
(2) It will also evaluate the difference between two dates. It will alert if Date 2 is earlier than Date 1.
(3) Works in all browsers.

Copy the source from this link http://www.addsoncraig.com/dates.html

Use it freely.:cool:

[jay3000bc]

.....

[glenngv]

I have checked out your code and found that it does not display the days of February correctly when initialized. It works only for onChange().

Here is the correct code for all your requirements.

(1) It will display dates correctly for any month any year.
(2) It will also evaluate the difference between two dates. It will alert if Date 2 is earlier than Date 1.
(3) Works in all browsers.

Copy the source from this link http://www.addsoncraig.com/dates.html

Use it freely.:cool:
I thought I've fixed that. Did you set the default date by calling setDefaultDate function?

Anyway, I've modified the script again (see attachment) to be able to have the default values set even without calling setDisplayMonths, setDisplayYears and setDefaultDate functions on initialization. Let me know if this works for you now.

bjawnie, can you post your code? How do you call the setDisplayYears function?

[bjawnie]

Hi,

I am afraid that my code wont help much since it's done in ASP.

The problem only occurred in FF when I used setDisplayYears, so I simply went and server side coded my way out of that part.

It would of course be great if this small bug could be fixed : )

[glenngv]

I'm only asking for the javascript code that calls the setDisplayYears() function. I suspect that you must be passing getYear() method of the Date object instead of getFullYear().

[azkiwi]

Hi Glenn,

Great script - though have found one issue.

If I try to set "tomorrow.setDate(tomorrow.getDate()+x);" to a date that is either on the 30th or 31st of a month - it changes it to the 3rd of that month instead.

I assume this is something to do with the formatting rules for Feburary - though don't know how to fix it.

Any ideas?

[liorean]

azkiwi: How about setting the date to 00:00:00 the first of the following month, and then reduce that time by 24 hours? It breaks if the daylight savings change happens on that date in the country of the client I suppose, but I think it should be fine otherwise.

[azkiwi]

Thanks for the reply.

The problem ended up being the default date being set to today. This occurs in the script before you initialse your own dropdown date.

So while I was trying to select the 31st of March - the script had already figured that it would only show/allow 29 days (as it is currently February).

Removing the default values solved the problem.

[glenngv]

azkiwi, if you want to set the default date to a specific date, you can use something like this.

var defaultDate = new Date("03/31/2008");

datePicker2 = new DropdownDatePicker(f.month2, f.day2, f.year2);
datePicker2.setDisplayMonths(2,true);
datePicker2.setDisplayYears(today.getFullYear(), today.getFullYear()+20);
datePicker2.setDefaultDate(defaultDate); //set default date

Anyway, thanks for the interest in my script. :)