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 ¶
abates wrote:
found this and using it for a university assignment thank you its awesome !!!!
Posted 07 Dec 2008 at 7:48 pm ¶
revanth wrote:
I need solution to display a 3 month calendar in my site and i need the calendar should starts from today and previous months are not going to be visible. can any one send the code plz…………
Posted 19 Jan 2009 at 2:39 pm ¶
twoguns wrote:
Really nice! Well structured and easy to understand.
Thanks!
Posted 23 Jan 2009 at 12:06 pm ¶
Cees wrote:
Finally a calendar with a decent event handler!
Any idea how I can get the selected date thru the fallsilent function? Apart from using “document.getElementById(”data”).value, that is?
Cheers,
Cees
Posted 01 Feb 2009 at 6:34 pm ¶
Lee wrote:
Is it license free?
Posted 14 Mar 2009 at 11:27 am ¶
Brendan wrote:
The calendar comes up, but off the form (in the underlying window) and the month selector at the top of the calendar is strung accross the page. Any ideas?
Posted 20 Mar 2009 at 6:51 am ¶
Ian wrote:
Great script. I changed the date format to mm/dd/yyyy just fine. I’ve also changed the first day to Sunday according to Mark and Daniel’s posts. Now though, When I select a date is appears correctly (mm/dd/yyyy) but when I activate the calendar again after I have selected a date, It pulls the second value as the month; as in I view the date as mm/dd/yyyy but it inputs as dd/mm/yyyy. Any suggestions why? Thank you in advance.
Posted 20 Mar 2009 at 4:25 pm ¶
Brian Phelps wrote:
I’ve found a CSS problem with this script, in that the cwcalendar.css modifies UL, wrecking my CSS layout on the rest of the site. I can’t see how calendar.js is outputting UL, so not sure how to modify the class name to something unique, like cal_us. Any hints or workarounds? Thanks.
Posted 26 Mar 2009 at 1:42 am ¶
Brian Phelps wrote:
My mistake, it was a problem elsewhere on the page…
Posted 26 Mar 2009 at 2:56 am ¶
pradnya wrote:
Hi,
I tried your datepicker. Its cool, but I want to know where is that final date getting stored actually. You code puts it on the clickable element itself. Whatif I have to use it somewhere else?
Posted 01 Apr 2009 at 3:50 pm ¶
Ian wrote:
I fixed all my problems. I’ve made several changes with the date picker: 1) First day is Sunday 2) Date format MM/DD/YYYY 3) Correctly re-entering the date
Posted 14 Apr 2009 at 3:28 pm ¶
Eric wrote:
Ian, can you share HOW you fixed 3) Correctly re-entering the date?
Posted 17 Apr 2009 at 11:19 pm ¶
Eric wrote:
another problem is you can’t set the value of the form field in the html and have it show up when you bring up the calendar (like if you’re editing a record as opposed to creating a new one) Too many issues, I’m giving up on this one. Thanks for trying!
Posted 18 Apr 2009 at 12:35 am ¶
adisan wrote:
@ Eric, if the date is filled in the input form, it will take that date instead of default.
Posted 05 May 2009 at 10:00 am ¶
Ian wrote:
@Eric:
The process was trial and error, but after I applied the suggestions mentioned above to make the calendar start on Sunday, I went to work on correcting the date re-entry problem.
Starting On line 36:
36: if(typeof(formatType) == “undefined”)
37: formatType = monthFormat + formatSplitter + “dd” + formatSplitter + yearFormat; //Format data type
Then Starting On Line 208:
208: dayLink.href=”javascript: newDay(”+ i + “);fillBackDate(”+this.selMonth+”,”+i+”,”+ this.selYear+”)”;
Lastly Starting On Line 549:
549: document.getElementById(elem1).value = tMonth + formatSplitter + tYear + formatSplitter + tDay;
Try those out, and also do some trial and error on the code to get it to work the way you want it to.
Posted 15 May 2009 at 2:42 pm ¶
Howard wrote:
Any fix for the safari backwards year browsing issue? (no arrow… no link… no way to move back years browsing in safari). I thought it was a configuration issue until I saw the post above…
Developing on a MAC makes this a troubling issue…
Posted 01 Jul 2009 at 3:51 am ¶