In my earlier post I have a calendar function listed. Although I have never tried to explain the codes that I have posted. The following is an attempt to do so.
The function has there parameters. First parameter is the ID of the input field. There is a problem with IE on getElementsByName thus I cannot use name of the input field for cross browser compatibility purpose.
Second parameter is the date format. The input accepts YMD, DMY, MDY format only. As said before, user can add their own formats. It is quite straight forward.
The third parameter is not user definable. It is intended for the popup to call back to $cP to change the month.
The overall functionality of this code is to create a popup window and insert a calendar using Javascript. When user clicks on the date in the calendar. This value is returned to the input field which calls the $cP function.
When user changes month, the popup calls back to $cp by passing back the same parameter plus a date which is one month before or after the current month. $cP will see the new parameter and replaces the popup with a new calendar.
The following is a line by line explanation of the function.
The function first creates the array for parsing the month information for display purpose.
It then check whether the third parameter is defined. This is used by the popup window to call back by passing a new date. If it is defined then the curdate is set to the new date otherwise curdate is the os date.
curmth and curyr gets the month and year of the curdate for use when choosing background of the calendar.
fdm gets the new date by setting the day of the month of curdate to 1. This change is for getting the weekday of the first day of the month.
ldm stores the last month's date. The if condition address a problem with "Date" function. It seems that "Date" function cannot take negative Month while trying to get last month date. If the month is already 0 it switch to reducing the year by one and set month to 11 otherwise just minus the month by 1.
ndm is the next month's date. Both ldm and ndm is used in the calendar for user to click on and change the month.
fdm is trying to set itself by deducting the day of the week from it. "setDate" is a javascript function to add days to a date. The days can be negative. (Interestingly even if you set the days to -0, it still deducts a day from the date.) The purpose of this function is to ensure that the first date chosen is the first row first column of the calendar. The first column is of course "Sunday".
The first day of the month may not be Sunday. Thus, I need to find out which day of the last month, counting back from the first day of the current month, is a "Sunday".
If I can find the first Sunday date then I could add the rest of the days to the calendar by filling them sequentially. Now I am ready to set the calendar.
The next few lines is just to create the document of the popup window. You can use document.write to create any DOM. Obviously, I am writing to the popup window. Thus I set obj to the opened window's document object.
It is quite tedious to use document.write. However, I have no choice as I do not want to create the actual web page physically.
After creating the necessary CSS, I create the the table. One of the lines compose the last month's date and next month's date with the current month displayed between them. This will allow user to change date by clicking on either side of the current month.
Next, we create the body of the calendar itself. A loop within a loop ensures that there are 5 rows of 7 columns created each filled with a date from fdm which is increased by 1 day each loop. The onclick attrbute will set the calling input field with the date value if clicked.
The iGray and iWhite class is to set the date background to gray if it is not current month.
The switch option is to set the format of the date according to the second parameter of the $cP function.
The fdm is increased by one day.
You would be curious to know what is the if condition doing in the first loop. Well, we all know that if the first day of the month is a "Saturday" and the month may be 30 or 31 days. 5 rows with 7 columns may not be enough to fill all the days of the month. It is therefore necessary to add one more row if fdm after the fifth row is greater than 29. That is to say, it is not already at the next month's date. 29 is chosen because if Saturday is 1, 30 and above will be on the 6th row. Feb 29 will never fall on the 6th row.
The rest of the code is to close the table and add a "close" for user to avoid choosing a date.
obj.close is there because if you don't close it. The window popup will hang for a considerable time before showing the content.
obj.focus is there if you happen to click on the main window while the popup window is still open. I can't help you if you minimize the popup window. Any subsequent calling of $cP will not wake it from minimize condition.
