My Javascript Date Chooser

There are plenty of Javascript calendars and date choosers out there for jQuery (and most of the other frameworks), but this one is completely standalone.

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

13 thoughts on “My Javascript Date Chooser

  1. Hi!
    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?
    Thanks!
    Valters

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

  2. I recently revisited this post, and realized the new design for the site 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 defaults, setting the size of the buttons back to auto. It is now fixed, and the demo works as expected.

  3. 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;
    }
    }
    }
    }

  4. Hi,

    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.

  5. Nice code! The calender works splendidly. I did have to make one change to make the interpretDate function so it would conform to the currently set dateFormat (otherwise it always uses ‘/’ between date parts). My new interpretDate function is as follows:

    Calendar.prototype.interpretDate = function(date) {
    date=date.replace(/[\.-s]/g,”/”);
    date=date.replace(/^(dd)(dd)(dd)$/,”$1/$2/$3″);
    date=date.replace(/^(dd)(dd)(dddd)$/,”$1/$2/$3″);
    date=date.replace(/^(dd)/(dd)/(dd)$/,”$1/$2/20$3″);
    return (new Date(date)).format(this.dateFormat);
    };

    Let me know if I’ve done something stupid or am just not using the code right and creating this issue myself, but I believe this is a valid fix to an inconsistency. Again, AWESOME code, hopefully this helps make it a bit more robust!

Leave a Reply

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