frequency decoder ~ Unobtrusive Date-Picker Widget Update

The LowDown

An attempt at writing a datePicker (calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.

A quick feature list…

Fully keyboard accessible
Multiple date formats and date dividers supported
Unobtrusive and nameSpace friendly
Fully skinnable with CSS
Both upper and lower date limits can be set
Certain days of the week can be disabled
Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
Includes “smart” localisation (16 languages currently available)
Bespoke days of the week can be highlighted
Works with single text inputs, split text inputs or select lists
It’s free to use, even commercially (Released under a CC share-alike license)

Splitting the date across three text inputs

The datePicker can now work with dates that have been split across three text inputs (an input for the day, an input for the month and one for the year). Just add the class split-date to the associated year input’s className. Inputs that have the class split-date do not have to stipulate a date format.

In order for the script to be able to locate both the month and day inputs, the month input should be given the same ID as the year input with the string “-mm” added to the end and the day input should be given the same ID as the year input with the string “-dd” added to the end. All of the normal configuration classes should be added to the year input’s className only.

An example of splitting the date in this way is shown in the demo.

Splitting the date across three select lists

The datePicker can now work with dates that have been split across three individual select lists (one for the day, one for the month and one for the year). Just add the class split-date to the associated year select lists’s className. Select lists that have the class split-date do not have to stipulate a date format.

In order for the script to be able to locate both the month and day lists, the month select list should be given the same ID as the year select list with the string “-mm” added to the end and the day select list should be given the same ID as the year select list with the string “-dd” added to the end. All of the normal configuration classes should be added to the year select list ‘s className only.

Select lists and date ranges

As the year select list can only stipulate a finite number of years, the datePicker will automatically create a higher and lower date limit using the selectList data i.e. if the year select list starts at 1960 and ends at 1990, the associated datePicker will automatically disallow the selection of dates outside of this range.

Select lists and invalid dates

Should the user select an invalid date using the select lists e.g. 31st September (remember, September has only 30 days!), the datePicker will automatically show a corrected date of the 30th September when launched.

Date formats and the date divider

The date-picker currently supports dates of the format dd-mm-yyyy, mm-dd-yyyy, yyyy-mm-dd or yyyy-dd-mm. The date format is declared by adding one of the following classes to the associated input’s className; format-d-m-y, format-m-d-y or format-y-m-d. Inputs that do not have the class split-date have to have one of the aforementioned “format” classes as, without it, no datePicker is created.

Additionally, the character used to separate the date parts can be “/”, “-”, “.” or “ “ (space). Again, this is declared by adding one of the following classes to the associated inputs className attribute; divider-slash, divider-dash, divider-dot or divider-space.

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.

Highlighting days of the week

By default, Saturday and Sunday are highlighted in another colour (in a burgundy red for the demo). Should you wish other days of the week to be highlighted instead, add a class of the format highlight-days-N to the associated input’s class attribute where N represents is a numeric representation of the days you wish to highlight e.g. adding the class highlight-days-012 will highlight Monday (0), Tuesday (1) and Wednesday (2).

Localisation

The script attempts to auto-detect the language of the users browser installation and download the corresponding language file from the server. Should the language file not exist, the datePicker display defaults to English.

Currently available languages

The following languages are currently available:

English
Spanish
French
Portugese (thanks to Sérgio Jardim)
German
Dutch
Greek (UTF-8: thanks to seloh)
Finnish (thanks to Kalle Pyörälä of Primesoft)
Romanian (UTF-8: thanks to Ionut Marinescu)
Russian (UTF-8: thanks to Flack)
Italian (thanks to Raf)
Arabic (UTF-8: thanks to Hassan)
Swedish (thanks to Henrik)
Norwegian (thanks to Eirik)
Ukranian (UTF-8: thanks to VojToshik)
Hebrew (UTF-8: thanks to Yoav)

If your language of choice isn’t shown, you can easily create the file yourself by using the “en.js” file as a template; of course, I would appreciate a copy of the new language file to add to the distribution.

New language files are, due to Internet Explorers hazy handling of UTF-8 encoded JavaScript files, better off stipulated as unicode.

I’ve bundled an HTML file (unicode.html) with the download that enables you to translate entire UTF-8 phrases into their Unicode equivalents. This is based on the Slayer Office unicode lookup service – a URL every web developer should have bookmarked.

Should you wish to disable the detect locale functionality, add the class no-locale to the associated input’s className – the datePicker will then display in English, it’s default language.

Please Note: Version 3.6 introduced a “Today” button that has, at present, only been translated into French, English, Hebrew and Spanish. All other languages will display the button in English until the word “Today” has been translated and added to the respective language files.

The “first day of the week”

The first day of the week is now stipulated within the downloaded language file. Should the language file not contain this setting, the first day of the week defaults to Monday.

Additionally, users can now click on any of the day headers to dynamically set it as the first day of the week (or alternately, press the numbers 2-7 on the regular keyboard or numpad).

JavaScript access to the datePicker object

The individual datePicker JavaScript Objects can now be accessed by calling:

    
  datePickerController.datePickers["the associated input's id"]

This means that all of the inputs now require an ID attribute should you wish to access their associated datePicker Object.

Limiting date selection

The date-picker enables you to define both a lower and upper limit for date selection. Dates outside of the specified range are grayed out and unselectable.

To add a lower or upper limit, stipulate them as part of the associated inputs className e.g. adding range-low-2005-12-02 range-high-2005-12-20 to the className will limit the selection of dates to between the 2nd, December 2005 and the 20th, December 2005.

Date ranges declared in this way have to be constructed using a YYYY-MM-DD format.

Should you just wish to default either the upper or lower limits to today’s date, you can add either of the classes range-high-today or range-low-today.

Setting the date range dynamically

The upper and lower date ranges can be set programmatically by calling the following two methods:

    
  datePickerController.datePickers[“the associated input id”].setRangeLow(“YYYYMMDD date string”);

  datePickerController.datePickers[“the associated input id”].setRangeHigh(“YYYYMMDD date string”);

The dates passed to the two methods should be stipulated using the YYYYMMDD date format e.g. 20060230 (which can be constructed by calling the inbuilt “dateFormat” method as shown within the source code to the reservation date demo).

Be warned, the script does no validation checks on the date ranges when changed in this way i.e. it does not check if the higher date is actually higher than the lower date; so it’s up to you to validate the date ranges before calling the methods in question.

An example of using the setRangeHigh and setRangeLow methods can be viewed within the reservation date demo.

Disabling dynamically calculated dates

It is now possible to disable/enable dates that require a date calculation; for example, Easter. This requires you to add an “onupdate” method to the datePickerController Object. This method is called every time either the datePicker’s displayed month or year changes and is passed the datePicker JavaScript Object as an argument. An example of extending the datePickerController Object this way is shown below:

  
 // Calculate and disable Easter
 datePickerController.onupdate = function(dp) {
        // dp = the datePicker Object
        // dp.date = the datePickers Date Object

        var x = dp.date.getFullYear();
        var a=x%4;
        var b=x%7;
        var c=x%19;
        var d=(19*c+15)%30;
        var e=(2*a+4*b-d+34)%7;
        var f=Math.floor((d+e+114)/31);
        var g=(d+e+114)%31+1;

        var dt = datePickerController.dateFormat(x + “/” + f + “/” + g);
        // Disable Easter for this datePicker 
        dp.setDisabledDates([dt]);
 }

A working example of the above code (that also creates a dynamic style for the date in question) can be viewed within the onUpdate demo

Disabling day selection

You can now stipulate days of the week to disable. This is done by adding the class disable-days-N to the associated input’s className, where N is a string of integers that represents the days of the week you wish to disable; for example, adding the class disable-days-12 will disable Monday (1) and Tuesday (2) for the associated datePicker.

An example of disabling days in this way is shown in the demo.

Disabling day selection dyamically

Should you wish to disable the day selection programmatically, call the datePicker’s setDisabledDays method, passing in an array of seven binary numbers that represent which days of the week to disable; for example, passing the array [1,0,0,0,0,0,0] will disable Monday, passing [1,0,1,0,1,0,0] will disable Monday, Wednesday and Friday.

  
  // Disable Monday, Wednesday and Friday
  datePickerController.datePickers["the associated input id"].setDisabledDays([1,0,1,0,1,0,0]);

An example of disabling days of the week dynamically can be seen in the disable days demo.

Disabling date selection

You can now stipulate specific dates to disable. Unlike the other configuration options, this can only be achieved by calling the datePickers setDisabledDates method and not by adding a class to the associated input’s className.

Stipulating the dates to disable

The dates you wish to disable should be stipulated in a YYYYMMDD format and can contain wildcards for both the year and month; for example, passing the Array [“20061225”, “****1231”, “******01”] to the setDisabledDates method will disable the 25th of December 2006 (“20061225”), the 31st of December for all years (”****1231”) and the first day of every month for all years (”******01”).

  
  // Disable specific dates 
  datePickerController.datePickers["the associated input id"].setDisabledDates(["20061225", "****1231", "******01"]);

An example of disabling dates in this way can also be seen in the disable days demo.

Enabling only specific dates

You can now stipulate specific dates to enable, all other dates will be greyed out and unselectable. Like the setDisabledDates configuration option, this can only be achieved by calling the datePickers setEnabledDates method and not by adding a class to the associated input’s className.

Stipulating the dates to enable

The dates you wish to enable should be stipulated in a YYYYMMDD format and can contain wildcards for the year, month and date parts; for example, passing the Array [“200612**”, “****1131”, “******01”] to the setEnabledDates method will enable all dates within December 2006 (“200612**”), the 31st of November for all years (”****1131”) and the first day of every month for all years (”******01”).

  
  // Enable specific dates only
  datePickerController.datePickers["the associated input id"].setEnabledDates(["200612**", "****1231", "******01"]);

Disabling the transparency effects

To disable the fade-in/fade-out effect, just add the class no-transparency to the associated input.

Styling individual dates

To enable you to target and style individual dates using CSS, each TD node is now given two extra classNames of the format dm-date-month and dmy-date-month-year, where date is replaced by the integer date value, month is replaced by the integer month value and year replaced by the integer year value e.g. the TD node for the date 21/03/2007 will be given the classNames dm-21-3 and dmy-21-3-2007.

The active “cursor”

This version of the script has a much better system for showing the current “cursor” position.

A cursor is necessary as the datePicker is keyboard accessible and keyboard users require a visual clue as to which date is currently active i.e. which date will be selected when the carriage return key is pressed.

Currently, the datePicker shows the selected date with a black border and black text and the current cursour position in blue.

Keyboard accessibility

The arrow keys can be used to change the highlighted day. Pressing CTRL + ← or → increments/decrements the current month. Pressing CTRL + ↑ or ↓ increments/decrements the current year.

Keeping the keyboard or mouse button depressed activates a timed increment i.e. there’s no need to repeatedly press the mouse button or arrow keys.

Pressing Enter selects the currently highlighted date, pressing Esc closes the datePicker without selecting a date and Space highlights todays date. Additionally, pressing 2 to 7 (using the numpad or regular keyboard) now sets the associated day to be the “first day of the week”.

Bugs and foibles

Our good friend Internet Explorer requires (for reasons that I won’t detail here) that each input you wish to create a datePicker for, has a unique ID attribute assigned to it.

The License

The script is now released under a creative commons Attribution-ShareAlike 2.5 license. Should you use the script within a commercial context (or are feeling generous today), please think about clicking the payPal donate button – it’s certainly not an obligation but it would most certainly put a smile on my face.

Demo, downloads and updates

View the updated date-picker demo, the reservation date demo or download the .zip file of the of the datePicker JavaScript, CSS and accompanying images.

The JavaScript code can be “packed” using Dean Edwards Packer should size be an issue.

Additionally, a Rails plug-in has been developed by Brian Landau and is available from the google code repository. Thanks Brian!

22/01/2008 (v4.4):

SelectLists can now contain default options e.g. “choose month” or optGroups
Fixed a bug in IE when attempting to focus on a hidden text input
Moved the button creation code into the datePicker Object

19/12/2007 (v4.3):

Fixed a disableDates bug

15/11/2007 (v4.2):

Fixed a Safari2 bug

05/11/2007 (v4.1):

Rewrote the rendering code to be much faster than before
Fixed a bug that enabled keyboard users to select disabled dates
Added the “static” datePicker option (no-fade className)
Changed the activation button to use an “A” element, not a “button” element

13/09/2007 (v4.0):

Added a tabIndex to each TD element containing a date
Added a call to the onupdate method of datePickerController (if it exists) which enables you to enable/disable holidays that have to be calculated e.g. Easter
Tidied up the CSS and added a new background image for blank TD elements
Fixed the keyboard control in Safari

03/08/2007 (v3.9):

Changed the code that dynamically loads the locale file to enable the packed version to be used without having to rename it from datepicker_packed.js to datepicker.js
Added the selectList functionality (thanks to Richard Davies for the friendly nudge)
Changed the code to always download a locale file, even when the detected language is English
Added a “Show Calendar” toolTip to the dynamically created button (currently only available within the French and English locales)

02/08/2007 (v3.8):

Removed Internet Explorer’s dependance on the “blank.html” document
Added a loosely packed version of the script to the download (rename it from datepicker_packed.js to datepicker.js when in use)

15/06/2007 (v3.7):

Added the Hebrew language file (thanks to Yoav)
Added the Internet Explorer BASE check (heads-up to Shaun Inman)

12/06/2007 (v3.6):

Added the “Today” button
Wrapped the Month name and Year within the title bar in spans to enable easier styling
Fixed a once-in-a-blue-moon date calculation bug (many thanks to Ryan Rushton for the bug report and testcase)

17/04/2007 (v3.5):

Fixed a bug that added incorrect classNames to each td node

03/04/2007 (v3.4):

Fixed a bug in the range-high and range-low (today) parsing

27/03/2007 (v3.3):

Fixed a positioning bug in Internet Explorer
Fixed a bug that meant the html page “jumped” when a datePicker was activated for the first time

22/03/2007 (v3.2):

Added the setEnabledDates method
Fixed a bug within the setDisabledDates method

13/03/2007 (v3.1):

Rewrote the setDateFromInput method to be more robust when invalid dates are encountered.
Added the “range-high-today” and “range-low-today” options.

12/03/2007 (v3.0):

Worked on Internet Explorer memory leaks.
Added extra classNames to each TD node to enable styling of individual dates.

09/02/2007 (v2.9):

Fixed a bug that appeared when the automatic “daylight savings” calculation was activated on a Windows machine (many thanks to Tony Calleri of IBM Global Services for locating and fixing the problem).

31/01/2007 (v2.8):

Added functionality that disables the next/previous buttons when appropriate.

03/01/2007 (v2.7):

Added functionality that enables you to switch off the transparency effects for individual datePickers.

14/12/2006 (v2.6):

Fixed an Internet Explorer bug that meant the datePicker never disappeared.
Added the setDisabledDates method.

12/12/2006 (v2.5):

Changed the code to enable the script to be used in “quirksmode” scenarios.

01/12/2006 (v2.4):

Fixed a bug that removed the button used to activate the datePicker after an Ajax call updated the associated input’s innerHTML

06/11/2006 (v2.3):

Changed the dateFormat function to accept an extra Boolean parameter that, when TRUE, stipulates whether to attempt to parse a “m-d-y” formatted date before a “d-m-y” formatted date
Changed the setRangeLow and setRangeHigh methods to accept a YYYYMMDD date format string
Bundled the “reservation date” example with the .zip download
Added the “setDisabledDays” method
Fixed a “colspan” issue for Internet Explorer
Added a fix that disables date selection when the datePicker is fading in or out of view
Changed the datePicker to position itself in relation to the associated calendar icon and not the associated text input
DatePickers that have the class “split-date” now do not need to stipulate a date format
Added code that attempts to always reposition the datePicker within the bounds of the browser viewport

02/11/2006 (v2.2):

Removed references to uppercase tagNames and lowercased the colSpan reference (thanks to Meryn for the info)

19/10/2006 (v2.1):

Changed the license
Integrated code that dynamically calculates the blank.html document’s location (which should always be placed within the same directory as the datepicker.js javascript file)
Fixed the Internet Explorer “NaN” bug when an invalid date is entered into the input box (thanks to Jan Brašna for the fix)

Tags: calendar, datepicker, javascript, unobtrusive

Previous Comments ~

Shawn Medero · http://soypunk.com

#1 · Monday October 2, 2006

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

Frequency Decoder

#2 · Tuesday October 3, 2006

@ Shawn: Hi Shawn, thanks for the warning. I spent a whole 2 minutes yesterday writing the post and didn’t check the links!

Regards,
Brian.

elvelind grandin

#3 · Tuesday October 3, 2006

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

Dan Sorensen

#4 · Tuesday October 3, 2006

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.

Jonathan LaCour · http://cleverdevil.org

#5 · Tuesday October 3, 2006

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!

Frequency Decoder

#6 · Wednesday October 4, 2006

@ Dan: Hi Dan, thanks for the Mac feedback – it’s good to hear the widgit works in Safari (as for IE 5.2, it would take an incredible amount of hacking indeed to get the widgit to run).

I’m running IE7 RC1 standalone on XP SP2 and I don’t get the clipping issue (but I also don’t get any transparency effects or cleartype rendering on DOM nodes created with JS, which might just be a side effect of running a standalone installation – who knows).

Line 364 within the “resize” method is responsable for setting the width of the widgit to be equal to the width of it’s associated input. The CSS rule for the datePicker’s div container then sets a min-width:10em (a rule IE7 seems to ignore).

If you want to hack a quick fix, change line 364 from:

o.div.style.width = o.table.style.width = elem.offsetWidth + “px”;

to a more certain:

o.div.style.width = o.table.style.width = “10em”;

or, alternatively, just set the CSS rule for the ”.datePicker” class to have a width of 10em and comment out line 364 altogether.

You could also just try adding an explicit overflow:auto to the ”.datePicker” class as it’s the overflow property that IE7 doesn’t seem to want to get right (IE6 overflows quite happily).

Hope this helps some.

@ elvelind & Jonathan: Hi, I’m currently pondering the licensing issue but will need to read up more on the licensing options currently available. I’ll update the post should the licensing situation change.

Thanks for the feedback,
Brian.

Yoni Rabkin · http://yrk.nfshost.com/

#7 · Wednesday October 4, 2006

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.

Tom Carrington · http://www.distantdvd.com

#8 · Thursday October 5, 2006

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 :(

Fransjo Leihitu · http://www.leihitu.nl

#9 · Thursday October 5, 2006

wooow … me like …

Frequency Decoder

#10 · Thursday October 5, 2006

@ Tom: The script presented here has purposely not been compressed (to enable people to easily view/hack the source). A compressed version would, of course, have a much smaller filesize (up to 60 – 70% depending on the compression tool used).

The source is, in most cases, smaller, or at least equal to the size of other date picker scripts out there (and will of course, get cached the first time the script is downloaded) – so the 50k network footprint doesn’t worry me too much.

Regards,
Brian.

James Howard · http://www.monkeymagician.co.uk

#11 · Thursday October 5, 2006

Yet another lovely looking unobtrusive script. Great work!

Sérgio Jardim · http://www.plasmadesign.com.br

#12 · Thursday October 5, 2006

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!

Jacky · http://jacky.seezone.net

#13 · Thursday October 5, 2006

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)

Frequency Decoder

#14 · Friday October 6, 2006

@ James: Thanks, I’m glad you like it…

@ Sérgio: Thanks a lot, I’ll drop it into the download today and update the post to detail the available languages.

@ Jacky: Hi Jacky, I take it your talking about Internet Explorer (as all other browsers have no problems with select list z-index). I can’t seem to reproduce the problem though (using IE6). The datePicker should not even attempt to reopen if the button has already been pressed. Can you post a few more details on the browser etc for me? Thanks in advance.

Regards,
Brian.

A.G

#15 · Wednesday October 11, 2006

nice work, are there any news about the license ?

Stephen Hill · http://gatekiller.blogspot.com

#16 · Thursday October 12, 2006

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

Stephen Hill · http://gatekiller.blogspot.com

#17 · Thursday October 12, 2006

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.

Jan Brašna · http://www.janbrasna.com

#18 · Thursday October 12, 2006

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)

Frequency Decoder

#19 · Thursday October 12, 2006

@ Stephen & Jan: I’m an idiot. The demo and download has been changed and the correct spelling of “divider” is now taken into account. Dam my poor English language skills!

Jan, thanks for the Czech translation.

Stephen, yep, Internet Explorer is a numbnuts and seems to return a valid object when calling document.getElementById(input.name) – this is not meant to happen (an input’s name attribute is certainly not the same as an input’s id attribute but Internet Explorer thinks it is). Thanks for the warning, I’ll look into it.

@ AG: I’ll be checking out various licenses this weekend (Sunday morning no doubt).

Regards,
Brian.

Ronnie

#20 · Friday October 13, 2006

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 ;)

Jan Brašna · http://www.janbrasna.com

#21 · Monday October 16, 2006

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.

Frequency Decoder

#22 · Monday October 16, 2006

@ Ronnie: Hi Ronnie, thanks for the IE fix, I’ll integrate it into the code a.s.a.p. (trust Internet Explorer to return a NaN and not an Invalid Date – what an utter shite that browser is to code for!).

@ Jan: Hi Jan, thanks for the warning re: the 404 in Internet Explorer. I will change the code to have it look in the same directory as the .js file.

Thanks to you both,
Brian.

Henrik · http://www.haf.se

#23 · Tuesday October 17, 2006

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

Great work!

Michael Samdler · http://archer-group.com

#24 · Wednesday October 18, 2006

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.

#25 · Thursday October 19, 2006

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 :)

Frequency Decoder

#26 · Thursday October 19, 2006

@ Henrik: Thanks for the translation but I can’t seem to download it without the accented characters getting corrupted. Unfortunately, I need the language files with their special characters correctly encoded.

@ Michael Samdler: Hi Michael, yep, the rows are constant. This is to stop the datepicker growing/shrinking when changing months which, and trust me on this one, looks ugly as sin itself.

@ JL: What do you mean by “customise”? If you wish to change the look of the datePicker, just alter the CSS. All other parameters are passed using the associated form inputs className.

Regards,
Brian.

Rick

#27 · Thursday October 19, 2006

Hello!!
I have a question …

I want to be able put like that the calendar captures the days, months and years in an alone input text … thank you

#28 · Friday October 20, 2006

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.

#29 · Friday October 20, 2006

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

Frequency Decoder

#30 · Friday October 20, 2006

@ Rick: Hi Rick, just omit the className “split-date”.

@ JL: 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. Additionally, I have no problems with IE7 but I have updated the CSS and JavaScript to remove the bug entirely (for IE7 beta).

Regards,
Brian.

Stephen Hill · http://gatekiller.blogspot.com

#31 · Tuesday October 24, 2006

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

André Fiedler · http://www.visualdrugs.net

#32 · Wednesday October 25, 2006

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é

Frequency Decoder

#33 · Wednesday October 25, 2006

@ Stephen Hill: Hi Stephen, glad to hear you have sorted it out.

@ André: I have no problems using FireFox2. Are you having problems with the demo or a bespoke installation? If it’s a bespoke installation, you may not be calling the cleanUp method when you should after removing input nodes from the DOM.

Regards,
Brian.

Cory Duncan · http://www.opuscreative.com

#34 · Wednesday October 25, 2006

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!

Dan

#35 · Wednesday October 25, 2006

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!

Frequency Decoder

#36 · Thursday October 26, 2006

@ Cory: Hi Cory, I didn’t want to use dropdowns to enter the date as, personally (and I’m sure Jakob Nielsen would agree), it’s a tediously longwinded way in which to do it. Feel free to change the script to use dropdowns though.

@ Dan: Hi Dan, this is usually caused by one of two things:

1. The HTML page itself contains “broken” HTML (an unclosed tag etc).
2. The datePicker CSS uses em units to style the text and size the widgit. Your CSS may have set the default text size to be rather large.

Hope this helps.

Regards,
Brian.

Dan

#37 · Thursday October 26, 2006

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

#38 · Friday October 27, 2006

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 :)

Frequency Decoder

#39 · Friday October 27, 2006

@ Dan: Hi Dan, just set the font-size within the .datePicker class to be the font-size you wish to display (12px to get the calendar to size as in the demo).

As for the other questions (3 negative answaers I’m afraid):

1. No, only one calendar is associated with one input.
2. It’s possible but you would also have to change the method setDateFromInput to parse this date into a YYYYMMDD value.
3. I’ve no idea, sorry.

@ JL: Glad you like the datePicker. The posts I’m referring to are this post itself and the original post

Regards,
Brian.

Huring

#40 · Friday October 27, 2006

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

Frequency Decoder

#41 · Friday October 27, 2006

@ Huring: That would be rather sweet of you. Please send it to brian [at] modernartcafe (d0t) net and I’ll include it in the distribution.

Regards,
Brian.

Dan

#42 · Friday October 27, 2006

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!

Meryn · http://del.icio.us/meryn

#43 · Saturday October 28, 2006

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!

frequency decoder

#44 · Sunday October 29, 2006

@ Dan: Hi Dan, the "reservation" functionlity should be easy enough to do without having to change the core script. I’ll see if I get a few minutes this week to set up a testcase.

Update: I've quickly knocked up a proof of concept for you. Check the page source to how it was done.

@ Meryn: Hi Meryn and well spotted. These must have slipped past the radar when I wrote the original script. I’ll update the distribution as soon as is possible.

Regards,
Brian.

Max

#45 · Monday October 30, 2006

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!

Dan

#46 · Tuesday October 31, 2006

Brian,

Perfect. Thanks!

Dan

#47 · Tuesday October 31, 2006

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

Frequency Decoder

#48 · Tuesday October 31, 2006

@ Max: Hi Max, you will have to change the following lines of code (this is being written live into the comment box and is entirely untested!):

Line 1057 (add the else clause):

if(inpId in datePickerController.datePickers

&& !datePickerController.datePickers[inpId].visible) { datePickerController.datePickers[inpId].show();
} else if(inpId in datePickerController.datePickers && datePickerController.datePickers[inpId].visible) { datePickerController.datePickers[inpId].hide();
}

Lines 799 and 818 (comment out completely):

// 799: datePickerController.addEvent(document, “mousedown”, o.events.onmousedown);
// 818: datePickerController.removeEvent(document, “mousedown”, o.events.onmousedown);

Hope this helps.

@ Dan: Hi Dan, oh, the joys of Internet Explorer… it seems to fire the onload events in a last-in first-out basis (all other browsers fire the events in a first-in first-out basis – theres no defined specification for event order so I can’t say that Internet Explorer is getting it wrong, it just does it differently than other browsers).

I’ve updated the page to test to see if the datePickers are created and, if not, set a timeout to recall the initialiseDatePickers function 500 milliseconds later. Only Internet Explorer should need this piece of code so, in theory, it could be wrapped in a conditional compilation comment block.

Regards,
Brian.

Martijn

#49 · Tuesday October 31, 2006

Hi Brian,

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

Martijn

#50 · Tuesday October 31, 2006

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

Frequency Decoder

#51 · Tuesday October 31, 2006

@ Martijn: Hi Martijn, are you calling the datePickerController.create() method after the Ajax’ed HTML is loaded into the div? Has the new HTML input been given the relevant classNames?

André Fiedler · http://www.visualdrugs.net

#52 · Tuesday October 31, 2006

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

Ciao André

André Fiedler · http://www.visualdrugs.net

#53 · Tuesday October 31, 2006

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

Ciao André

Dan

#54 · Tuesday October 31, 2006

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

Martijn

#55 · Wednesday November 1, 2006

@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

Frequency Decoder

#56 · Thursday November 2, 2006

@ André: Ye Gads André, a missing semicolon within the code! The stuff that nightmares are made of… LOL. I’ve added the semicolon in question within the current distribution.

As for the script not passing the compressor; thats a question probably more suited to the javascriptcompressor.com forums (if there is such a thing).

I won’t be creating a mootools version of the script (why mootools and not jQuery, prototype or the YAHOO libraries?) – I actually don’t mind the site traffic, thats what the site content is for after all…

@ Dan: Hi Dan, the error is being thrown on the second page as your attempting to reference a non-existent variable “ed1”. Personally, I would forget about trying to set the first datePickers range (I’m all for simplicity). I’ve spotted an error within the reservation testcase I posted for you (a DD/MM/YYYY date is required, not a D/M/YYYY). I’ve updated the testcase code to fix the error, you will have to update the code on your page accordingly.

@ Martijn: Hi Martijn, is there a javascript error being thrown when you call the .create method?

Dan

#57 · Thursday November 2, 2006

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!

Frequency Decoder

#58 · Friday November 3, 2006

@ Dan: Hi Dan, just add the class format-m-d-y to the associated input’s className (read the original post for a full list of the available configuration classes).

Regards,
Brian.

Dan

#59 · Friday November 3, 2006

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

Frequency Decoder

#60 · Friday November 3, 2006

@ Dan: Hi Dan, just read the first line within the setReservationDates function i.e.

// Is the value a dmy date?

As we are now usin MM/DD/YYYY dates, the test never returns true and so the function does not execute. You need to change the regExp into it’s MDY equivalent, cut the input’s value (this.value) into 3 parts, rearrange these parts to get a DD/MM/YYYY string and pass this into the setRange methods.

I’ll try to knock up a better testcase that covers all the scenarios next week. In fact, it would probably be better if I changed the setRange functions to accept YYYYMMDD strings as then you could just use the inbuilt parseDate method to produce this format (saving lots of pain in the ass string manipulation). I’ll attempt it next week when I’m back at the keyboard.

Update: I've changed the setRange methods to accept a YYYYMMDD date string and updated the reservation date demo accordingly.

Regards,
Brian.

Kristi Cavenaugh

#61 · Friday November 3, 2006

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.

Frequency Decoder

#62 · Monday November 6, 2006

@ Kristi: Hi Kristi, it’s actually pretty easy to accomplish. I’ve created a demo that disables days of the week in this way for you.

You will need to download the latest release (v2.3) for this to work.

Regards,
Brian

Hassan · http://infochallenge.com

#63 · Monday November 6, 2006

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

Frequency Decoder

#64 · Monday November 6, 2006

@ Hassan: Hi Hassan, as far as I know, JavaScript files can be entirely UTF-8 meaning you don’t have to encode any of the characters.

Regards,
Brian.

Hassan · http://www.infochallenge.com

#65 · Monday November 6, 2006

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

Michał Stempień · http://www.xms.pl

#66 · Wednesday November 8, 2006

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.

Kristi Cavenaugh

#67 · Thursday November 9, 2006

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!

Alexander

#68 · Monday November 13, 2006

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

Frequency Decoder

#69 · Monday November 13, 2006

@ Hassan & Michał: Thanks for the language files guys. The only problem with having utf encoded language files is that I can’t be sure that the HTML page has been specified with an identical utf encoding.

@ Kristi: Glad to be of help.

@ Alexander: Hi Alexander, this would only be possible by passing the datePicker Object an array of the dates to highlight using javascript (a long list of dates would be overkill if passed using the input’s className). It would also mean that the script be changed to “highlight” these dates appropriately (are all other dates exempted from selection or just not coloured i.e. “highlighted” in the same way?).

It would take a few hours to write/test and I’m currently very pressed for time so I’ll have to leave it to your good self to attempt the modifications. Sorry about that.

Regards,
Brian.

Hassan

#70 · Tuesday November 14, 2006

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

Frequency Decoder

#71 · Wednesday November 15, 2006

@ Hassan: Ahhh, you learn something new everyday… I’ll update the code this weekend with the utf change.

Regards,
Brian.

Eric

#72 · Wednesday November 15, 2006

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

Any tips?

Thanks!

Frequency Decoder

#73 · Friday November 17, 2006

@ Eric: hi Eric, you should really try to google for the answer before asking here. Anyway, it’s simple, just call the following function onload:

  
  function init() {

    // A local function that creates a two character string
    function makeTwoChars(inStr) {
      return inStr < 10 ? "0" + inStr : inStr;  
    }

    // I’m assuming your input has the id "myInput"
    var myInput = document.getElementById("myInput");

    // Create a new date Object
    var dt = new Date();

    // I’m assuming the "date-format" is d-m-y 
    // and the "date-divider" a forward slash
    myInput.value =  makeTwoChars(dt.getDate()) + "/" + makeTwoChars(dt.getMonth()) + "/" + dt.getFullYear();
    
  }

Hope this helps,
Brian.

hassan

#74 · Monday November 27, 2006

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

hassan

#75 · Monday November 27, 2006

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?

hassan

#76 · Monday November 27, 2006

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 :

var date = elem.value;
with:
var date = elem.value.substr(0,10);
—-replace line 626:

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

Justin · http://www.wasabihawaii.com/

#77 · Tuesday November 28, 2006

@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?

Frequency Decoder

#78 · Tuesday November 28, 2006

@ hassan: Hi hassan, I don’t want to change the script to deal with time values as that means diving head first into another set of problems altogether. I’m glad you sorted the problem out though. Thanks for sharing the solution.

@ Justin: Hi Justin, Can you send me a link to the page in question? That way, I can have a look to see where the script (if it is the script) falls over. Your calling of the .create method is correct B.T.W. so, perhaps it is a problem with the script and dynamically generated HTML fragments.

Regards,
Brian.

cyprian.pl · http://pi2.pl

#79 · Wednesday November 29, 2006

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?

Justin · http://www.wasabihawaii.com/

#80 · Wednesday November 29, 2006

@ 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.

Frequency Decoder

#81 · Thursday November 30, 2006

@ cyprian.pl: Hi cyprian.pl, it would probably be better not to include the "inp.onpress" as this would attempt to show the datePicker on each keypress. You could just attach an onfocus instead i.e.

inp.onfocus = ...

Also, I still haven't found a JavaScript compressor that can deal with Internet Explorer conditional compilation which is why there is currently no compressed version of the script available.

@ Justin: Hi Justin, thats some class A table styling you got going on there my man. Very nice indeed. If your just changing the disableDays and rangeHigh/rangeLow, you could get the (s)Ajax response to send these as a Json object i.e.

{ disableDays : [0,0,0,0,1,1,0], limitHigh: "YYYYMMDD", limitLow : "YYYYMMDD" }

and then use the setRangeHigh, setRangeLow and setDisableDays methods to alter the datePicker that’s already present (instead of creating another input using innerHTML). It’s a few lines more to code but it’s a viable short-term solution until I can figure out why the button disappears (viewing the rendered source, I see that both the input and datePicker are indeed created but the button has been removed by the innerHTML call). I’ll email you with results of my “lunch time testing” later today…

Regards,
Brian.

Justin · http://www.wasabihawaii.com/

#82 · Thursday November 30, 2006

@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.

Mike

#83 · Monday December 4, 2006

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?

VinceM

#84 · Monday December 4, 2006

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).

Frequency Decoder

#85 · Tuesday December 5, 2006

@ Justin: Hi Justin, glad it’s sorted (I’ve sent you a mail B.T.W).

@ Mike: Hi Mike, the demo uses “em” units to style the datePicker. Perhaps the font used creates smaller double-chevron characters in Safari than in Firefox etc. If all else fails, change the em to a set-size “px” declaration or change the font to one installed by default on a Mac – I think I use “georgia”, which might not be a Mac default font (I don’t have a Mac so can’t say for sure).

As for the year not incrementing/decrementing when the button is pressed, it looks like a bug in Safari’s implementation of the Date object (fingers crossed that it isn’t). As I don’t have a Mac, this one’s going to b

Unobtrusive Date-Picker Widget Update

An update to the original Unobtrusive Date-Picker Widgit that throws a few of the most common feature requests into the mix

The LowDown

A quick feature list…

Splitting the date across three text inputs

Splitting the date across three select lists

Select lists and date ranges

Select lists and invalid dates

Date formats and the date divider

Creating static datePickers

Highlighting days of the week

Localisation

Currently available languages

The “first day of the week”

JavaScript access to the datePicker object

Limiting date selection

Setting the date range dynamically

Disabling dynamically calculated dates

Disabling day selection

Disabling day selection dyamically

Disabling date selection

Stipulating the dates to disable

Enabling only specific dates

Stipulating the dates to enable

Disabling the transparency effects

Styling individual dates

The active “cursor”

Keyboard accessibility

Bugs and foibles

The License

Demo, downloads and updates

22/01/2008 (v4.4):

19/12/2007 (v4.3):

15/11/2007 (v4.2):

05/11/2007 (v4.1):

13/09/2007 (v4.0):

03/08/2007 (v3.9):

02/08/2007 (v3.8):

15/06/2007 (v3.7):

12/06/2007 (v3.6):

17/04/2007 (v3.5):

03/04/2007 (v3.4):

27/03/2007 (v3.3):

22/03/2007 (v3.2):

13/03/2007 (v3.1):

12/03/2007 (v3.0):

09/02/2007 (v2.9):

31/01/2007 (v2.8):

03/01/2007 (v2.7):

14/12/2006 (v2.6):

12/12/2006 (v2.5):

01/12/2006 (v2.4):

06/11/2006 (v2.3):

02/11/2006 (v2.2):

19/10/2006 (v2.1):

Previous Comments ~