My Javascript Date Chooser

If you just want the code, feel free to grab the files:

Give it a try:

All it takes to actually USE this, is to add onfocus=”cal.showCal(this);” to any text input like this:
<input name=”demo” type=”text” maxlength=”10″ size=”10″ onfocus=”cal.showCal(this);” />

About Aaron D. Campbell

Owner and lead developer at BlueDog, Aaron has 10+ years of web development experience, it a regular core contributor to the WordPress project, and has released many WordPress plugins.
This entry was posted in JavaScript and tagged . Bookmark the permalink.

13 thoughts on “My Javascript Date Chooser

  1. valters says:

    I would really like to use this calendar, but what really makes me sad that it starts the week with sunday. i think its a problem for many users. i went through the code and couldnt solve this to start week with monday an correct dates. can you post how to do this?

  2. It would take a fair bit of changing. If I get extra time, I’ll do it. Unfortunately, I don’t think it will be very soon. I’ve got WAY too many projects at the moment. Hopefully you can find someone to do it for you.

  3. Jubz says:

    The “give it a try” field is not working for me (Firefox). The onfocus even does not seem to be triggering.

  4. naisioxerloro says:

    Good design, who make it?

  5. I recently revisited this post, and realized the new design for messed up the look of the calendar, making it nearly impossible to use! I apologize, and I added one line to the css that overrides the Xavisys defaults, setting the size of the buttons back to auto. It is now fixed, and the demo works as expected.

  6. Grant says:

    This is supremely sexy. I’ll be using this for sure. Thanks for sharing this!

  7. Chad says:

    Thanks, great calendar!

  8. Marco Dimichele says:

    Hi, there’s an error on line 73 of calendar.js. It should be replaced with:
    for(i=0; i!=selects.length; i++) {
    otherwise it will not work on ie.
    Also, I suggest to replace the conditional code /*@cc_on … @*/
    with a check on ie version, because ie7 handles correctly the overlay, and in this case the is not necessary. The final version should be:

    Calendar.prototype.setSelectVisibility = function (vis) {
    if (false /*@cc_on || @_jscript_version < 5.7 @*/) {

    var selects = document.getElementsByTagName('select');
    for(i=0; i!=selects.length; i++) {
    if(typeof(selects[i]) == 'object'){
    selects[i].style.visibility = vis;

  9. sadi says:

    hi i want to control the back date. i.e user cant select back date is it possible here

  10. Joel says:


    this is great – is there any way for this to be changed to do dd/mm/yyyy format instead of yyyy/mm/dd format?

    it will display the text box as dd/mm/yyyy – however, if i select “02/04/2010” for example (2nd april 2010) then when i click on the box again it thinks it is the 4th February, and that date is selected?

    Thanks in advance for the help.

Leave a Reply

Your email address will not be published. Required fields are marked *

Note: If you are replying to another commenter, click the "Reply to {NAME} ↵" button under their comment!