Home


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

Comments

  1. Jason wrote:

    How can I format the date as mm/dd/yyyy when inserting into my text box?

  2. Jason wrote:

    Also, how can I get Sunday to be the starting day of the week, and Saturday the end day?

  3. 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?

  4. C.R. Dick wrote:

    Does the calender pop over other content on the page?

  5. adisan wrote:

    it does not pop. It simply shows a calendar over the content, based on the settings you’ve chosen.

  6. 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”

  7. 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?”

  8. adisan wrote:

    well, this is a feature yet to be implemented.

  9. Daniel wrote:

    Where are you setting monday as day 0? I’d just like to change that to sunday.

  10. 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;
    },

  11. Daniel wrote:

    Line 197: needs to be
    for(i=0;i

  12. Daniel wrote:

    One last try

    for(i=0;i<=getDaysInMonth(this.selMonth, this.selYear); i++)

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

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

  15. baji wrote:

    this going down to dropdownlist,how to privent this problem?

    Please help….

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

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

  18. crystal wrote:

    an answer for the month starting with “0″….add this:

    if(tDay

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

  20. 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;

  21. Mark wrote:

    Thank you all for the helpful tips on setting Sunday as the first day and for setting the date format!

  22. 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;

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

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

  25. terence wrote:

    I’d like the calendar to set all the past dates including today not selectable.
    How can i do this? thanks

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

  27. eric wrote:

    how can i reposition the calendar? because in my page it elapses from the table

  28. adisan wrote:

    @eric
    can you show me a webpage with your problem?

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

  30. 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…

  31. 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!

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

  33. abates wrote:

    found this and using it for a university assignment thank you its awesome !!!!

  34. 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…………

  35. twoguns wrote:

    Really nice! Well structured and easy to understand.

    Thanks!

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

  37. Lee wrote:

    Is it license free?

  38. 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?

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

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

  41. Brian Phelps wrote:

    My mistake, it was a problem elsewhere on the page…

  42. 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?

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

  44. Eric wrote:

    Ian, can you share HOW you fixed 3) Correctly re-entering the date?

  45. 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!

  46. adisan wrote:

    @ Eric, if the date is filled in the input form, it will take that date instead of default.

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

  48. 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…

Post a Comment

Your email is never published nor shared. Required fields are marked *

*

*