Javascript Calendar Widget v1.07
This is just un update for the original calendar script. It includes the american date format(year-month-day). It’s also the default setting now so if you need other formats you’ll have to play with the options. All the other stuff remain as in the first version, so you’ll find the documentation here.
You can download it here. A working example can also be found here (click on the input).

Jason wrote:
How can I format the date as mm/dd/yyyy when inserting into my text box?
Posted 08 Jan 2008 at 8:36 pm ¶
Jason wrote:
Also, how can I get Sunday to be the starting day of the week, and Saturday the end day?
Posted 08 Jan 2008 at 9:04 pm ¶
Jason wrote:
Another thing, in IE6, if you have a select box right below the input box that the calendar is asociated with, the calendar goes behind the select. Can that be fixed?
Posted 08 Jan 2008 at 9:21 pm ¶
C.R. Dick wrote:
Does the calender pop over other content on the page?
Posted 24 Jan 2008 at 3:56 am ¶
adisan wrote:
it does not pop. It simply shows a calendar over the content, based on the settings you’ve chosen.
Posted 25 Jan 2008 at 2:09 pm ¶
Paul A wrote:
Thanks for a great script.
The first 40 lines contains the configuration.
Check out this line for changing the date format:
formatType = “dd”+formatSplitter+monthFormat+formatSplitter+yearFormat;
And the “yearFormat”. Set it to “yyyy”
Posted 31 Jan 2008 at 4:30 pm ¶
Lidia wrote:
Very nice…
But still no answer for Jason… I ask the same:
“how can I get Sunday to be the starting day of the week, and Saturday the end day?”
Posted 07 Feb 2008 at 8:46 pm ¶
adisan wrote:
well, this is a feature yet to be implemented.
Posted 08 Feb 2008 at 10:41 am ¶
Daniel wrote:
Where are you setting monday as day 0? I’d just like to change that to sunday.
Posted 20 Mar 2008 at 9:44 pm ¶
Daniel wrote:
To make Sunday the first day change the following:
Line 104: var DayCol = new Array(”S”, “M”, “T”, “W”, “T”, “F”, “S”);
Line 197: for(i=0;i 0)
Line 215: dayCell.innerHTML = “ ”;
Line 272-279:
isWeekend: function(tDay)
{
sun = new Date(this.selYear, this.selMonth, tDay).getDay();
sat = new Date(this.selYear, this.selMonth, tDay).getDay();
if(sun==0||sat==6)
return true;
return false;
},
Posted 20 Mar 2008 at 9:52 pm ¶
Daniel wrote:
Line 197: needs to be
for(i=0;i
Posted 20 Mar 2008 at 9:53 pm ¶
Daniel wrote:
One last try
for(i=0;i<=getDaysInMonth(this.selMonth, this.selYear); i++)
Posted 20 Mar 2008 at 9:54 pm ¶
Edward wrote:
Hi,
I got two problems… the first one is with the day before to the first day to the month, im getting a 0 on that day. So my calendar starts as 0, 1, 2, 3, etc. I did what Daniel says about to change sundays as the first day of the week, but i don’t know what is wrong with it.
The second is with the date format. I’m trying to get the mm/dd/yyyy, but when i trying to use this code:
formatType = monthFormat+formatSplitter+”dd”+formatSplitter+yearFormat;
The calendar appears like uncomplete.
Any idea about this? Thanks,
Ed
Posted 27 Mar 2008 at 9:06 pm ¶
winard wrote:
for daniel.. im not js guru but when i followed ur instruction on no. 10 comment. i have problem in days it start from 0 instead to 1.. so i guessed it should be
line 197 : for(i=1;i
Posted 01 Apr 2008 at 9:08 am ¶
baji wrote:
this going down to dropdownlist,how to privent this problem?
Please help….
Posted 04 Apr 2008 at 6:59 am ¶
ChrisT wrote:
13. Ed: here’s a work around for the date format. It may not be exactly what you want, but for me it was acceptable.
change
line 27 on calendar.js to:
formatInputs = 3
change function code on form page to:
choose
then make 3 text fields instead of one:
you can then combine them + generate a timestamp with php code for your data base input
Posted 04 Apr 2008 at 9:05 pm ¶
ChrisT wrote:
opps: let’s try that again:
change
line 27 on calendar.js to:
formatInputs = 3
change function code on form page to:
:
choose
then make 3 text fields instead of one:
:
:
:
you can then combine them + generate a timestamp with php code for your data base input
Posted 04 Apr 2008 at 9:09 pm ¶
crystal wrote:
an answer for the month starting with “0″….add this:
if(tDay
Posted 08 Apr 2008 at 8:08 pm ¶
crystal wrote:
ack! sorry for the junk post. I’ll try again here.
an answer for the month starting with “0″….add this:
if(tDay < 1)
return false;
within the isValidDate fuction found on line 244. this should be the first if statement within that function. it worked for me anyway….hope it helps
Posted 08 Apr 2008 at 8:09 pm ¶
crystal wrote:
also to get the date in the right order try fixing line 546 to be:
document.getElementById(elem1).value = tMonth + formatSplitter + tDay + formatSplitter + tYear;
Posted 08 Apr 2008 at 8:39 pm ¶
Mark wrote:
Thank you all for the helpful tips on setting Sunday as the first day and for setting the date format!
Posted 13 Apr 2008 at 4:18 am ¶
Mark wrote:
OK, I’m also seeing the “Day 0″ issue. Here’s a fix on approximately line 246, just below the function name “isValidDate: function(tDay)”
Add this two lines:
if (!(tDay>0))
return false;
Posted 13 Apr 2008 at 4:22 am ¶
Mark wrote:
Here’s a full fix reflecting Daniel’s solution:
To make Sunday the first day change the following:
Line 104: var DayCol = new Array(”S”, “M”, “T”, “W”, “T”, “F”, “S”);
Line 197: for(i=0;i0)) // Add this line
return false; // Add this line
…
Posted 13 Apr 2008 at 4:24 am ¶
Mark wrote:
Forget the above comment.. it’s not being displayed properly. Just look at Daniel’s comment #10, and then Daniel’s comment #12. Finally, add this to prevent the display of the zero (0) Calendar date:
Line 244:
isValidDate: function(tDay)
{
if (!(tDay>0)) // Add this line
return false; // Add this line
Posted 13 Apr 2008 at 4:26 am ¶
terence wrote:
I’d like the calendar to set all the past dates including today not selectable.
How can i do this? thanks
Posted 30 Apr 2008 at 3:33 pm ¶
adisan wrote:
@terence
itype=’strict’;
imaxDays = 900;
Max Days sets the timespan for your selection enabled calendar in days.
Then set startDay, startMonth and startYear as the first day from when you need to have your selections enabled.
Posted 02 May 2008 at 11:16 am ¶
eric wrote:
how can i reposition the calendar? because in my page it elapses from the table
Posted 17 Oct 2008 at 9:01 am ¶
adisan wrote:
@eric
can you show me a webpage with your problem?
Posted 21 Oct 2008 at 2:20 pm ¶
Nik wrote:
Hello.
Love the script- but Im wondering if there is a way to be able to browse in years PAST.
See it in action here, http://www.kued.org/?area=pr, and notice that there is no way to go back in years, though you can advance the years.
Thank you very kindly.
Posted 31 Oct 2008 at 3:10 am ¶
adisan wrote:
@Nik,
Not sure if I understood your problem. I browsed the calendar on your website and it does the back year browsing, as it is supposed to…
Posted 31 Oct 2008 at 2:23 pm ¶
Nik wrote:
I’m sorry, you’re right… it does work fine for me in FF on Mac OS X, but it’s not displaying in Safari… any ideas on why that might be?
I guess this isn’t a critical issue as long as it’s working in FF though… great script! Thanks for providing it!
Posted 31 Oct 2008 at 4:17 pm ¶
Keith wrote:
Hi
I’m have the following problem.
I’ve created a booking form for a Guest House. The form contains two text fields, one of Arrival Date and one for Departure Date.
When someone clicks in the Arrival Date field the JS Widget pops up and you can select a date, great. Select the Departure text field and do the same as above.
So, if the user has entered the wrong date for the Arrival when they click back into the text field the JS Widget showns the Departure Date rather than what was selected for the Arrival Date.
Is there a way to make the JS Widget remember what was entered originally?
Thanks
Posted 19 Nov 2008 at 11:47 am ¶