.

JavaScript Calendar Script/Date Picker Widget

There are many javascript calendar widgets(or date pickers) out there - so I decided to make another one. Yes, I have a really bad case of 'Not-Invented-Here' syndrome...

Demo



Download the Code

Features

Disadvantages(or To Do List)

License

BSD, as always

Similar Scripts

Comments

Anonymous at 13 Mar, 2009 11:34
Hello, this is a good and useful script but it's not clear how to use it !
Reply to this.
starmizzle at 22 May, 2009 07:38
This is how to use it:

<html>
<head>
<script src="calendar.js" type="text/javascript"></script>
<link href="calendar.css" type="text/css" rel="stylesheet" />
</head>

<body>
<input type="text" name="date" id="date" />
<script type="text/javascript">
calendar.set("date");
</script>
</body>
</html>
Reply to this.
Anonymous at 26 May, 2009 05:43
Well done man !! I will try this code..
Reply to this.
Anonymous at 04 Jun, 2009 02:33
Hello,

Your date picker is great!

Can you tell me how to change the javascript so that the date format is mm-dd-yyyy?

Not a big deal, but if it is not a difficult change that would be great.

Thanks!
Reply to this.
Brian at 26 Jul, 2009 09:35
I've been running this on a live site for a while without any problems...while trying to convert to a Joomla site on localhost, I ran into a situation where clicking on the drop-down button for the month displayed not only the 12 months, but a large list of functions as well. Selecting any of the functions returned January as the current month but it seems a little strange. This was on Firefox 3.0.10 (Windows XP Home SP2), but I then reproduced it on Google Chrome (2.0.172.37) and Opera (2.0.172.37). IE 7.0 did the same thing (although Microsoft being Microsoft it looked a bit different. Just wondering if anyone else had seen this. I looked at the code and it appears to loop through the month_names and should be able to stop when it hits the end.
Reply to this.
Carol at 15 Dec, 2009 11:52
Did you find a solution? I've got the same issue.
Reply to this.
Adrian at 30 Mar, 2010 11:49
Have someone fixed the JOOMLA! problem?
See Brian at 26 Jul, 2009 09:35 topic.
Thx in advance!
Reply to this.
Adrian at 06 Apr, 2010 04:35
Finally!! I fix the Joomla bug. More than that now it works width a calendar button(attached to input field).
I also fix some little bugs, but any way lots of thX to the author of this simple but grate script.
Reply to this.
tedd at 16 Aug, 2009 07:46
Your calendar rocks -- nice job.

Cheers,

tedd
Reply to this.
Kevin at 26 Aug, 2009 11:40
Excellent - simple and sweet.
Reply to this.
Anonymous at 22 Oct, 2009 02:50
its not working with firefox
Reply to this.
Kittu at 15 Nov, 2009 11:19
this script works good,
i have a small doubt can i stop the date selection to the current date,
if so plz provide the script.
Reply to this.
Manoj at 09 Jan, 2010 01:41
Thanks a lot it work's

Thank you once again to give such a nice code.....


Reply to this.
Samalah at 11 Mar, 2010 01:10
Great little script! Thank you for sharing this with us. I'm not really a Javascript coder, but I was able to make a couple of little modifications to the date formatting, which worked for the job I'm using it for.

I needed the date to read like this: 12th March 2010 so I did the following (probably very clumsy!)...

FIRST, find the line that reads: var ths = _calendar_active_instance;

PASTE the following lines, right after it. They help you to use the full month name in the input field (January in stead of 01, February instead of 02 etc.) and also put the 'th' or 'st' in 12th or 21st etc.

var themonthname = parseInt(month-1);

var thedaynum = parseInt(day);
var ordinal = '';
if (thedaynum == 1 || thedaynum == 21 || thedaynum == 31) {
ordinal = 'st'
}
else if (thedaynum == 2 || thedaynum == 22 ) {
ordinal = 'nd';
}
else if (thedaynum == 3 || thedaynum == 23) {
ordinal = 'rd';
}
else {
ordinal = 'th';
}

NEXT change the line that says: document.getElementById(ths.opt["input"]).value = year + "-" + month + "-" + day;

to THIS: document.getElementById(ths.opt["input"]).value = day + ordinal + " " +this.month_names[themonthname]+ " " + year;

NEXT find this: selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);

and change to THIS: selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]);

That makes sure that the right day is selected on the calendar, if you open it again after selecting a day.

LASTLY you can find this line: if(w < 10) w = "0" + w;

and put // in front of it, so it reads like this: //if(w < 10) w = "0" + w;

That's optional, but it stops the dates having a zero in front of them (02nd January 2010 looks ugly, this will make it 2nd January 2010)

As I said, I'm not a Javascript coder, so that may not be the best way of doing things, but it does work. Hopefully that can help someone else use this great script! :)
Reply to this.
Samalah at 11 Mar, 2010 03:58
I've since discovered a slight problem with my code above: it won't highlight the day in the input box, when you open the calendar a second time.

You need to find THIS line: var date_parts = date_in_input.split(" ");

change it to THIS: var date_parts = cleandate.split(" ");

and paste the following right ABOVE it:

var cleandate = date_in_input.replace("th","").replace("st","").replace("nd","").replace("rd","").replace("January","1").replace("February","2").replace("March","3").replace("April","4").replace("May","5").replace("June","6").replace("July","7").replace("August","8").replace("September","9").replace("October","10").replace("November","11").replace("December","12");

that reverses the nice formatting, and turns it back into a number, so the script can correctly highlight the date from the input box.

I only share this in the hope that it might help a fellow newbie - not claiming it's the best or brightest way to do things, it just worked for me, that's all. :)

Reply to this.
Prateek at 15 Mar, 2010 09:21
Hey, awesome man... We screwed out with so many date pickers with 3 days straight and finally found yours which works like a charm.. we are begginers to web development.. such a huge thanks for this one.. :)
Reply to this.
Kapil at 25 Mar, 2010 04:46
Hi friend

Ur DatePicker is really superb....but i found a flaw in that... i.e the value of the test box doesn't changes with the new date...ple update..i am in need of that..

thanks in Advance

regards

kapil
Reply to this.
Anonymous at 26 Mar, 2010 04:45
Hi,
It is really excellent. Can u please update if u have worked on the above points mentioned
Date format need in MM-dd-yyyy

Please update as i need it. Thanks in advance
Reply to this.
Comment

Please dont enter you comments in this form - this is a fake form to confuse spamming bots. The next form is the real one.




Comment




Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become &lt;). Urls, Line breaks will be auto-formated.