If this is your first visit, please read this post in full before following the link to the latest version, as most of the configuration options listed here are still valid.
There are a multitude of date-picker scripts available on the internet but, with only a few exceptions, they all require either the use of a nasty pop-up window or the inclusion of an embedded JavaScript block within the HTML.
No one in their right mind likes pop-up windows and personally, the thought of embedding JavaScript blocks within the (X)HTML just doesn’t do it for me, so, I decided to spend a couple of my infamous “shaky Sunday mornings” coding an unobtrusive date-picker that was accessible using the keyboard and suitable for use within documents served as application/xhtml+xml (as no document.write statements are used).
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 classnames to the associated inputs class attribute; “format-d-m-y”, “format-m-d-y”, “format-y-m-d” or “format-y-d-m”. This is an obligatory classname as without it, no date-picker is created.
Additionally, the character used to seperate the date parts can be “/”, “-”, “.” or “ “ (space). Again, this is declared by adding one of the following classnames to the associated inputs class attribute; “divider-slash”, “divider-dash”, “divider-dot” or “divider-space”.
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 greyed out and unselectable.
To add a lower or upper limit, stipulate them as part of the associated inputs classname e.g. adding “range-low-02-12-2005 range-high-20-12-2005” to the classname will limit the selection of dates to between the 2nd, December 2005 and the 20th, December 2005.
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 classname of the format “highlight-days-_daylist_” to the associated inputs class attribute where daylist is a numeric representation of the days you wish to highlight e.g. adding the classname “highlight-days-012” will highlight Monday (0), Tuesday (1) and Wednesday (2).
Localisation
The date-picker 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 date-picker display defaults to English.
Currently available languages
The following languages are currently available:
- English
- Spanish
- French
- Dutch
- Finnish (thanks to Kalle Pyörälä of Primesoft)
- Romanian (thanks to Ionut Marinescu)
- Italian (thanks to Raf)
If your language of choice isn’t shown, you can create the file yourself by using the en.js file as a template (I would appreciate a copy of the new language file to add to the distribution though!).
Should you wish to disable the detect locale functionality, add “no-locale” to the associated inputs classname – the date-picker will then display in English, it’s default language.
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 set it as the first day of the week.
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 (except in Opera, see below). Keeping the keyboard or mouse buttons 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 date-picker 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”.
Opera keyboard accessibility woes…
Some of the keyboard navigation is broken in Opera due to it’s inbuilt “Spatial Navigation” feature (Opera uses CTRL + the up/down arrow keys to jump between in-page links for example). This could be fixed by choosing a key other than CTRL to use within the script.
Unfortunately, I like the idea of using the CTRL key in combination with the arrow keys (it’s positioned right beside arrow keys on the keyboard for a start). Should this offend your sense of well-being, just change the script to accomodate the key of your choice.
The inevitable “IE factor”
No JavaScript project is complete without it’s fair share of Internet Explorer quirks and foibles and this one was no different.
Internet Explorer, by default, renders selectlists above any other onscreen element (regardless of the z-index assigned to the element in question). This meant that any date-picker appearing within the bounds of a selectlist, had the selectlist “sit above” the date-picker widgit, making point & click date selection sometimes impossible.
The solution was to create an iframe especially for IE that sat below the datepicker but effectively hid the selectlist in question.
More information on the “hack” can be found on Joe King’s dotNetJunkie website.
Another Internet Explorer woe concerns it’s annoying habit of not ever caching background images for any element created through the DOM. As I have used images within the demo, this causes Internet Explorer to download them each and everytime a date-picker is created or displayed.
There are solutions out there (A nice write-up can be located at http://www.ahinea.com/) but none of them are easy (or indeed, within my control) so, the current CSS uses the “* HTML” hack to remove them for Internet Explorer.
Credit where credit’s due
Most of the logic behind date ‘calculations’ was gleened directly from the WebFX datepicker widgit
Bugs and irritations
- Gecko based browsers:
Pressing the up/down arrow keys to change the currently highlighted day does not cancel the browsers page scrolling mechanism – this is driving me insane, if anyone out there has found a solution I’d be eternally gratefull.(Note: this has been fixed in the latest version) - Internet Explorer:
When any of the keyboard arrow keys are pressed down and kept pressed down, Internet Explorer cannot update the U.I. fast enough(Note: again, this has been fixed in the latest version). - Safari (2.0.3): I’ve only been able to (very quickly) check the demo in V2.0.3 to find that the CSS used for the demo (while valid) has “rollover” and “background-image” problems. The latest version of Safari apparently fixs the problem.
Demo, download and updates
A 19k .zip of the datepicker JavaScript, CSS and accompanying images is now available.
View the date-picker demo.
07/04/06 :
- Add a fix for Internet Explorer that caused a security warning to appear whenever the script was used on a secure page (thanks to John)
06/04/06 :
- Made the “day header” buttons keyboard accessible
20/03/06 :
- Changed the clickable “day headers” to use buttons and not links
14/03/06 :
- Added the firstDayOfWeek and dayAbbr into the language file
- Added functionality that enables users to click on a day header to set the first day of the week
- Fixed a bug that called removeEvent and not the correct datePickerController.removeEvent
- Removed the firstDayOfWeek option from the regular expressions as it’s now defined within the downloaded language file
- Fixed an Opera “redraw” bug (within the CSS)
08/03/06 :
- Fixed the dividor → divider spelling error within the regular expressions
03/03/06 :
- Fixed the Internet Explorer keyPress bug
02/03/06 :
- Integrated the addEvent, removeEvent and findPosition functions into the datePicker Object
17/02/06 :
- Added the “detect locale” code
15/02/06 :
- Fixed the Firefox “page scroll” bug
04/01/06 :
- Removed most of the images from the CSS for Internet Explorer
Previous Comments ~
I don’t actually have straight 'download' links as this tends to discourage JavaScript newbies from flooding my inbox with "How do I" demands (it sounds harsh I know).
Braddock, the date-picker initialises itself using the date (if any) present within the associated input tags value if thats any help.
Update: Download links for the date-picker have now been added to the above post.
Thanks for the interest.
it´s a very nice calendar, thank you. But there is one problem. The date-range runs only with the months january to June.
I think that two regular expressions are wrong:
var regExp4 = /range-low-([0-6\-]){10}/g; // the lowest datevar regExp5 = /range-high-([0-6\-]){10}/g; // the highest selectable
this should be right:
var regExp4 = /range-low-([0-9\-]){10}/g; // the lowest datevar regExp5 = /range-high-([0-9\-]){10}/g; // the highest selectable
Greetings,
Stephan
Yep, your right, the regular expressions were wrong! I’ve posted the changed code.
Thanks for pointing the error(s) out (and the accompanying fix).
Brian.
I also like the LGPL dynarch, but really appreciate the nice way in which your control can be added unobtrusively. In fact, your whole site is a high-point compared to most of the other code resources I’ve seen … Very well put together.
Thanks for the kind words… In fact, the date-picker is licensed under a creative commons nc-sa license which dissallows any commercial implementation without the consent of the author.
Honestly, I don’t think the datepicker in it’s current format is sturdy enough for a commercial implementation (but perhaps I’m being over cautious – I wouldn’t want you to be flooded with support emails should anything go wrong).
Should you wish to use it in a single commercial implementation though, go right ahead, you now have the authors permission (it would be nice but certainly not compulsory, if you mailed me a link so I could see it in action).
Again, thanks for the interest.
Take care,
Brian.
In fact the calendar positions itself relative to it’s associated input.
It’s entirely possible to pass id of the dynamically created button into the datePicker Object as part of the options array and then change the .resize() method (responsible for positioning the datePicker) to use the button coordinates and not the associated input coordinates when positioning the datePicker.
It’s not a change many people are asking for though so I’m not actually going to integrate it into the downloadable version (unless of course I’ve a flood of comments/emails all demanding the same thing!).
I’ve emailed you a version with the change integrated – hope this helps.
Thanks for the comment,
Brian
Bill
I’m glad you like the datePicker!
I’ve thought of attempting to determine the locale etc but just haven’t had the time to implement the feature. I would prefer loading another .js file using the DOM though and not a .css file. This would make the internationalisation (what a mouthfull) of the script much easier – using css would mean dealing with generated content which, as we all know, just doesn’t cut the mustard with Internet Explorer.
Another problem is that the navigator.userLanguage property is non-standard and (as far as I know), is only supported by Internet Explorer (correct me if I’m wrong).
It’s still a feasable solution, though one that will only work for those people using IE (which is a real shame)...
hold on, I’m going to google “navigator.userLanguage”...
(20 seconds later)
In fact, I’m wrong, Safari and Gecko based browsers support the navigator.language property which makes the solution entirely feasable.
So, we could detect the language and then attempt to load an appropriately named .js file (“en-us.js” for example). It would mean however that the datePicker would need to catch any file loading errors (if the relevant language .js file does not exist on the server for example) and default to another language. This would be relatively easy to accomplish though.
Nice idea, if I’ve anytime free this weekend I’ll give it a try…
Thanks for the comment,
Brian.
Regards,
Brian.
A
Thanks to Bill for the suggestion…very Alphaversion of the Internationalised version has been made available.there’s a bit of a spelling problem. it says classes should be divid*e*r-something, but the actual working classes are divid*o*r-something.
My impossibly bad spelling strikes again!
I’ve changed the demo and JavaScript to check for the (correct) spelling i.e. divider, not dividor.
Thanks and well spotted,
Brian.
Is there any way to change the order to “s m t w t f s”?
Starting with sunday of course.
I found it go to line 757 and change lines 757 and 758 to look like the following
firstDayOfWeek:1,
highlightDays:[0,6],
@ Ethan: I actually have this functionality integrated into a new version of the script (which I’m currently testing). The ‘first day of the week’ is now specified within the language file (as it’s language specific). Additionally, users can now click on a day header (m, t, w etc) to set it as the first day of the week within the date-picker.
Should I have some free time today, I’ll update the source code within the demo and download .zip – if not, I’ll have it done within a few days certainly.
Update: I've uploaded the new version of the script.
Thanks for the interest,
Brian.
Hi Brian:
Firstly, thanks for this script – I have looked at many, but this beats them all, for presentation and ease-of-use.
One small problem which is beyond my limited knowledge of Javascript is where date-range-low is set to tomorrow. The initial display overwrites all dates from the current week with those from the following week. Further scrolling to and from the current month aggravates the situation !
Well done and
Salutations d’Allemagne
@ Robert: I can’t seem to reproduce the problem (using FireFox). If it’s not too much hassle, could you send your browser details and, if possible, a screenshot, to the email address listed in the page footer?
Hopefully it’s a CSS and not a JavaScript problem (I know that Safari 2.0.3. has big problems with the default CSS due to a bug in it’s rendering engine when dealing with background-image and background-repeat)
Thanks for the kind words B.T.W.
Regards,
Brian.
When using it on an SSL connection, brain-damaged IE 6 gives a mixed-content (http/https) warning because of the empty iframe.src attribute:
o.iePopUp.src = “”;
Here’s the fix:
o.iePopUp.src = “javascript:void(0)”;
I love this date picker. Thanks for sharing.
@ John: Thanks for the kind words and many thanks for the fix, I’ve already integrated it into the source code.
Regards,
Brian
hi brian, how can i put the date picker with a label and not an input?
@ Matias: Sorry, I don’t quite understand the question. Do you mean position the date-picker beside the label and not the input or do you mean activate the date-picker by clicking on the label?
Regards,
Brian.
hi ! great job but there is some error in the script i tried to select the month march using the previous month link and the days are wrong.
http://ebus.ro/examples/errorcalendar.gif
i translated the lang file to Romanian if u want to use it
http://ebus.ro/examples/ro.js
@ Ionut Marinescu: Thanks for the Romanian translation, I’ve added it to the distribution and demo.
As for the error, I can’t seem to be able to reproduce it.
I see from the screenshot that your using Firefox, can you tell me what version you use so I can try to install an identical version to see if I can reproduce the problem?
Thanks,
Brian.
hi ! i don’t think it has anything to do with the browser the error is only for march it dosen’t matter the year and it apears in firefox and ie
http://ebus.ro/examples/ieerror.gif
i’m using firefox 1.5.0.2 and ie 6.0.2900
me again. i tested some date pickers (6-7) and the only ones i had problems are u’rs and the one from http://webfx.eae.net/ so i think is something in the code section u used from them.
@ Ionut: Hi, I’ve still not been successful in reproducing the problem.
Firefox (English installation) screenshot
Internet Explorer (French Installation) screenshot
Sorry I can’t be more help.
Regards,
Brian.
Wonderful little tidbit, it’s brilliant! And it looks really nice as well. I, too however have the same experience in Explorer 6.0.29 XP SP2, the iframe shows “The page cannot be displayed” in the IE fashion. It fades and the calendar becomes visible above it. I don’t have any suggestions about what is wrong, but I thought I would let you know of the experience.
http://aaronfay.ca/downloads/cal.jpg
Otherwise, great work!
@ Aaron: Hi Aaron, there’s actually a very easy fix for this, just place a blank HTML document within the /js folder and change line 397 within the script to read:
o.iePopUp.src = ”./blank.html”;
The script currently uses a (nasty) javascript:void(0) to try to set the iFrame’s src but this doesn’t cut the mustard with IE SP2.
I’ll update the demo and download today with the change.
Thanks for the comment,
Brian
Wonderful Brian, just wonderful.
Thanks again,
Aaron
Very nice!
I was wondering, I might use this on a commercial site if it fits the bill – (and you ok it).
Is there a way to restrict certain days from being selected. So I can only pick monday to friday for example?
I am trying to ajaxify this neat datepicker : 2 dates (start and end, depending each from the other)
when selecting a start date in my _form, I use the :onchange to make an ajax.updater call (start_date_changed), so i can defien a new ending date (star date + 10 days) and render a partial of the end date….. fine it works, I get the new ending date BUT the calendar image of this end date disappeared … (same when doing the opposite, end date changed…) what could be the problem ? the partial _enddate.rhtml is the same as initially displayed (w calendar image)
Booking End Date
text_field_tag(‘enddate’, @enddate, {:class => “format-d-m-y”, :readonly => “readonly”, :maxlength => “25”, :onChange => ‘new Ajax.Updater(“dd_startdate”, ”/booking/enddateChanged/?enddate=”+ this.value, {asynchronous:true, evalScripts:true});’} )@ Yves: I don’t really understand the problem (sorry). If you can email me the URL of the test page (brian [at] modernartcafe [d0t] net), I can have a look and perhaps find out what’s wrong.
Thanks for the comment,
Brian.
That’s a very pleasant widget. Good work!
Hello ! This widget is one of the best I have seen. I found lots of other DatePickers, but not so good. I have 2 questions :
– Do you offer another licence for commercial use ? – I was able to modify the script to change the position of the picker, but I am not fluent enough in Javascript to make it detect if it is entirely visible and modify its position accordingly. (When the component is near the bottom of the window, it open outside of it and the user needs to scroll to access it) Have you any hints about such a modification ?(BTW, I have not even find yet how the class name is used ! (not reference to class format-d-m-y in the css or the script). But I keep trying hard !
Thanks,
Pierre-Yves
PS: in the french script, Fevrier should be replaced with F\u00E9vrier and Decembre with D\u00E9cembre.
@Pierre-Yves: Bonjour, in fact, there is a commercial license, email me at brian [at] modernartcafe [d0t] net if you are suitably interested (I am quite literally a few hours away from boarding a flight to Ireland so I may take some time to respond to any email).
As for the classnames, they are used by the datePickercontroller object (near the bottom of the JavaScript code).
Aussi, merci beaucoup pour les modifs.
Regards,
Brian.
Brian – this a super date-picker! I’m having a problem seeing the cal.gif image – is there a simple solution I am just not getting? I can see it in your demo, and when I implement everything into my site, I can’t see it – and I love that little image! Can you offer a couple of suggestions?
@ Erin: Make sure the image path stipulated within the CSS file is correct. I have it as
background:transparent url(./media/cal.gif) no-repeat 0 0;
but you should make sure the path is correct for your site i.e. perhaps you have uploaded the image to another directory not called "media", in that case you have to change the url to match the url on your server.
The only other thing I can think of is that some other CSS block is overriding the styling used for the button (which has the cal.gif as a background image and is given the className "date-picker-control").
Regards,
Brian.
Hi !
I’m maxime delorme from France
My company is making a framework in javascript yes another one but
unobtrusive AND LGPL ,This framework is based on prototype, scritaculous and eventselector
we don’t like to re-invent the wheel so we trying to collect from the web interesting project
I read your blog and I’m very interesting in your date picker .
Your code will be improved, documented and new features will be added to you date picker. But to do so we need that you to change your licence (remove the nc part)
If you agree we it, we will be proud to put your code in this framework.
Thank you for your contribution
There’s an issue in IE7, at least in Beta 3. The calendar is only as wide as the associated input box which, in most cases, means that a significant portion of the right side of the calendar is cut off.
While I dream of a Firefox world, what approach can I take to fix this for IE7?
Excellent widget, by the way. So very useful.
I found at least one way to fix it, though I’m not sure it’s the best. Add an IE7 conditional stylesheet with:
.datepicker {
width: 200px !important; }@ Natalie: Hi Natalie, line 361 sets the datePicker width to the size of it’s associated input. You can most probably remove it alltogether from the code:
o.div.style.width = o.table.style.width = o.elem.offsetWidth + “px”;
If that doesn’t work, get back to me and I’ll add a fix to the code that sets the datePicker at a min-width of 200px.
Thanks for the comment.
@ Maxime: I’ll send you an email today. check your inBox.
Regards,
Brian.
Hi Brian – awesome script :o)
Can you help me out with two features?
1. How is it possible so that clicking on the form element opens the calendar (thereby not allowing the user to type in the date themselves).
2. How do I add a “Current Date” link at the bottom of the calendar so that it’s easy to jumpt back to today’s date after having scrolled this way and that…
You’re help in getting these two features down would be a huge bonus.
Cheers :o)
Richard
@ Richard: Just tap the spacebar to return to todays date. I don’t want to alter the script to disable the actual form element but feel free to do so yourself.
Thanks for the comment.
Regards,
Brian
Could you please resend your answer, it seems that I dit not receive your answer
Thanks
could you please use this another address the previous one has an aggressive spam filter
This is a great date picker, easily the best one I have come across so far. The only thing I would change would be adding (another) space in between the year changing link and the month changing link.
Great widgit though!
@ Colin: Hi Colin, glad you like it… If you want more space between the arrows, you can always alter the CSS to add a margin-left or margin-right to the appropriate buttons (I’ve not got the CSS handy so I can’t be more specific, sorry!). This will give you the same results as adding a non-breaking space.
Regards,
Brian.
// italian translation
var fdLocale = {
months:[ “Gennaio”, “Febbraio”, “Marzo”, “Aprile”, “Maggio”, “Giugno”, “Luglio”, “Agosto”, “Settembre”, “Ottobre”, “Novembre”, “Dicembre” ], fullDay:[ “Luned\u00ec”, “Marted\u00ec”, “Mercoled\u00ec”, “Gioved\u00ec”, “Venerd\u00ec”, “Sabato”, “Domenica” ], /* Only stipulate the dayAbbr should the first letter of the fullDay not suffice dayAbbr:[], / / Only stipulate the firstDayOfWeek should the first day not be Monday firstDayOfWeek:0, */ titles:[ “Mese Precedente”, “Mese Successivo”, “Anno Precedente”, “Anno Successivo” ]};
@ RAF: Thanks for the Italian translation, I’ve added it to the current distribution and the demo (the demo date-pickers should appear in Italian now - if you have an Italian browser installation).
Thanks again,
Brian.
I’m trying to set the first day of the week to Sunday. Is this the right syntax for setting the default value in the main .js file?
datePicker.firstDayOfWeek = [0];
Sorry for asking such a noob question. I’ve tried several different variations and have searched around with little luck.
I was thinking of using this for our Campus Visit page and was wondering if that would be acceptable. We’re a non-profit university. I’m hoping to get my own blog up on our servers in the next few weeks and would be more than happy to link to your site there.
@ Drew: Hi Drew, the first day of the week defaults to Monday (which sets the default display to Mon, Tue, Wed … Sat, Sun). Should you wish to change it to be Sunday, change line 138 from:
this.firstDayOfWeek = 0;to
this.firstDayOfWeek = 6;Remember, if one of the dynamically loaded language files includes it’s own setting for the first day of the week, this will override the new default value of Sunday.
As for using it for your Campus page, go right ahead…
Regards,
Brian.
Brian,
Thanks a ton!! I’ve updated both files and it’s working great now. One last question: Is there a way to turn off selecting for past dates and certain days (say Saturdays and Sundays)? I dropped some money in your PayPal tip jar for this great tool and all your help.
Thanks again.
Hi Brian,
The datePicker being created when the document is loaded, it won’t work in documents elements loaded through Ajax. Is there a workaround for this? (For exemple a function that could be called to create the datePicker?)
Thanks,
Pierre-Yves
@ Pierre-Yves: Hi, you can call the method:
datePickerController.create();
to create new date-picker widgits (for example, the demo calls this function each time a new input is created dynamically).
En fait, si vous pouvez m’envoyer un email au brian [at] modernartcafe [point] net, je peux vous donner une version plus recente du script.
Regards,
Brian.
sorry to be so thick but how does one instantiate this control in the page ?
@ Dee: Hi Dee, just add the script to the head section of your HTML document and give the input tag(s) you want to create date-pickers for the className “format-d-m-y”. The script will run automatically after the window.onload event fires and create date-pickers for each of the inputs with the appropriate className.
The full list of possible classNames is listed in the paragraph “Date formats and the date divider” within the article text.
If all else fails, view the demo source code to see how the example date-pickers were instantiated.
Regards,
Brian.
since i’m pulling the code from AJAX, i’m having a minor problem with calendar icon from css url.
If I was to use html img tag with href link what would I put into the code to achieve same functionality ?
@ Dee: Hi Dee, sorry gal but I don’t understand what you mean… if you stipulate a relative path for the icon within the CSS file (whilst the demo has the CSS embedded within the page, I suggest that you include it in a separate .css file), the icon should appear after calling the method:
datePickerController.create();
If you explain the problem in a bit more detail I’ll be able to help you more.
Regards,
Brian.
I can’t show you the problem because you comment block won’t accept code !!!!!!!!!!!!!!!!!!!!!!
Update: email me at brian [at] modernartcafe [d0t] net and I'll look into it for you.
/*Polish translation – there may be some encoding problems. I didn’t encounter any, but you never now. If you see any strange characters, try ISO-8859-2 codepage*/
months:[ “Styczeń”, “Luty”, “Marzec”, “Kwiecień”, “Maj”, “Czerwiec”, “Lipiec”, “Sierpień”, “Wrzesień”, “Październik”, “Listopad”, “Grudzeń” ], fullDay:[ “Poniedziałek”, “Wtorek”, “Środa”, “Czwartek”, “Piątek”, “Sobota”, “Niedziela” ], titles:[ “Poprzedni miesiąc”, “Następny miesiąc”, “Poprzedni rok”, “Następny rok” ]var fdLocale = {
};
I noticed that the “Today” indicator is present on other months. E.g. Today’s date is 9/27/06, if i click to October the 27th is highlighted with the same indictator, in fact the 27th of every month is highlighted with the Today indicator. Looks like a bug to me. Otherwise the widgit looks great.
Its not the “today” indicator its the “selected date” indicator. Which is still confusing for me, i havent selected any of the days in the other months but why does it look like i have?
Thanks for this great plugin! It works great! I only have one problem left in the IE: in the background of the picker he always shows me a error-page and I don’t know how to fix this.. I tried to scan your sourcecode but couldn’t find sth that resolves the problem…
@ Jordan: Hi Jordan, as the datePicker is keyboard aware, each month has to have a “selected date” i.e. the cursor has to be set at a date so the keyboard users know which date is currently active.
If the script wasn’t keyboard accessible, this wouldn’t be an issue.
Version 2 of the script addresses this problem – I shall try to upload it this weekend.
@ Frank: Hi Frank, you need the “blank.html” page to be resident on your server for that chump Internet Explorer not to show a 404. The blank.html should have been downloaded with the .zip file. Just upload it to the same folder the javascript resides in and the security error will, unlike Internet Explorer, go away.
Regards,
Brian.
This date-picker just rocks! Thanks a lot for your efford. Implementation of this date-picker in our applications is so easy ;) Can you mail me about a commercial license?
I have two questions: – Some applications use a start- and an enddate. How do I set the rang-low for the enddate when a startdate is selected? – Is it possible to build in the week number in the date-picker?
Thank a lot! Looking forward to version 2 :)
Forget the first question, I managed to write a little javascript for this. I will share the code so other people can use it.
Add an onchange for the startdate: onchange=”setDateRange(1,this.value)”
The function:
function setDateRange(intObjNumber,strRange) {
var lsRange = strRange.split(”-”);
var newRange = lsRange2 + lsRange1 + lsRange0;
datePickerController.datePickers[intObjNummer].low = newRange;
}
Me again, same problem : the month march is displayed wrong and i tested on about 20 computers with xp pro and 2000 pro.
the crazy thing is that it works corectly for years 2002 , 1996 , 1991 , 1985 , 1974 , 1968 , 1963 ,1957, 1946 and maybe other
Anyone else has this problem ? Any ideea how to fix this ?
Thanks in advance for any help
here is a updated version of the romanian language
http://www.bpoffice.ro/js/ro.js
@ Bas: Hi Bas, Yet again, the new version of the datePicker has two API methods that enable you to set both the high and low ranges. Hold out for a few days and you can download the new version…
@ Inout: Arrrgggghhhhh, this is driving me insane as I still can’t reproduce the problem. Is the FireFox console showing JavaScript errors when the problem appears? Does the problem appear on 2001 (but not 2002)?
Thanks for the new Romanian translation, I’ll add it to the download this weekend when I drop version 2 of the datePicker onto the server.
Regards,
Brian.
Hi ! Sorry to drive u insane is not my pleasure. The problem is in ie 7,firefox 1.5.0.7,opera 9.2 it dosen’t make any exceptions. The years diplayed corectly are 2002 , 1996 , 1991 , 1985 , 1974 , 1968 , 1963 ,1957, 1946 i tested until 1946. The problem is only for march all other months are diplayed corectly. Here is a example with years from 2006-2002 the year 2002 is displayed corectly http://www.bpoffice.ro/temp/errordatepicker.gif
Thanks for u’r help
@ Ionut: Hi, I shall be rewriting the core of the datePicker’s “updateTable” method this week in an attempt to solve the problem. Try the latest version – with any luck, the problem shall have been resolved – if not, bear with me for a few days until I find some time to rewrite the method in question.
Regards,
Brian
I love this calendar… excellent work! In addition to specifying a date range to select from, is there a way to disable the selection of Saturday and Sunday? I only want site visitors to be able to select Monday to Friday dates. How is this possible? Thank you… again, great product!
Follow-Up: I figured out how to disable weekends. What I did was go into the script and in added these lines (My first day of the week is Sunday (0)):
if ( colIndex 0 ) {
cells[currentWeek][colIndex].className = "out-of-range";
}
if ( colIndex 6 ) {
cells[currentWeek][colIndex].className = “out-of-range”;
}
BEFORE THIS:
if(o.outOfRange(tmpDate)) {
cells[currentWeek][colIndex].className = “out-of-range”;
}
Hopefully this helps others!
@ Kristi: Hi Kristi, in fact, this version of the script has been superceded by a newer version (check out the big yellow alert box at the top of the page).
The new version enables you to disable days of the week from being selected.
Regards,
Brian.
Note to self: Think about disabling comments for this post.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.