Friday, 26th January 2007ASP CSS Date Picker (Calendar)

CSS ASP Calendar Date Picker Script

This page is a demonstration of my ASP and PHP calendar scripts (found in the article here) being used as a date selector. Full credit for the XHTML & CSS of the calender must go to Veerle (veerle.duoh.com).

You can dowload the DatePicker script, CSS file, background image and example form as a zip here: Date-Picker-Popup-Calendar.zip

In order to make the scripts in to date selectors, two adaptations must be done:

1) The script must be displayed in a popup window called from the current page

2) The script must contain suitable javascript to be able to update the current page (the calling page) and then close itself.

Firstly, lets see a demonstration

Click the calendar icon below to demonstrate:

Calendar

Building: Step 1 - Popping Up the Calendar

The calendar pops up in a new HTML window using a simple - but slightly modified - Javascript Popup funtion. The reason for the modification is simple, when our Date Picker window pops up, it must know where to send the date that is selected. I could hard code this in to the popup but what happens if your form has more than one date field - for example a start date and finish date? Its much more elegant to pass the popup date picker the destination details of where to send the dates too. The example page included in the ZIP above has two date fields to demonstrate this - you can see it here.

So - lets take a look at the code:

Firstly, the calendar icon's link calls the function, with the ID of the form fields being passed in the parenthesis:

javascript:calendarPopup('startDay','startMonth','startYear');

This invokes this function (below) which takes the form field IDs and adds them to the URL (in a querystring), calling the popup window as it does so.

<script type="text/javascript">
function calendarPopup (dBx,mBx,yBx){
win=window.open('datePicker.asp?dBx='+dBx+'&mBx=' + mBx + '&yBx=' + yBx, 'datePicker', 'width=154, height=188');
}
</script>

Building: Step 2 - The Date Picker (displayed in popup window)

As mentioned previously, the date picker is a slightly modified version of the calendar script therefore I will not got in to much detail (as a full explanation can be found here). The two key differences are:

1) The addition to the page of a javascript function which, when called, updates the form fields on the form and then closes the Date Picker window. The functions destination is pulled from the values passed to the page in the URL (querystring) when it is called using VBScripts request("dBx") and then these are dropped in the function on the fly, eg: <%=dBx%>.

<%
dBx = request("dBx")
mBx = request("mBx")
yBx = request("yBx")
%>
<script type="text/javascript">
function applyDate (dayValue,monthValue,yearValue){
window.opener.document.getElementById("<%=dBx%>").value = dayValue;
window.opener.document.getElementById("<%=mBx%>").value = monthValue;
window.opener.document.getElementById("<%=yBx%>").value = yearValue;
window.close();
}
</script>

2) The calendar script has been modified so that the link for each day invokes the above function, passing it its date. The "Previous Month" and "Next Month" links also had to be updated to pass the form field IDs so that the script didn't "forget" the destination on the form for the dates.

<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
<%
dateToView = request("dateToView")
IF dateToView = "" THEN dateToView = date
daysInCurrentMonth = Day(DateSerial(year(dateToView), month(dateToView) + 1, 0))
firstDateofMonthDate = "1/" & month(dateToView) & "/" & year(dateToView)
firstOfMonthDay = weekday(firstDateofMonthDate)
lastOfMonthDay = weekday(daysInCurrentMonth & "/" & month(dateToView) & "/" & year(dateToView))
prevMonth = DateAdd("m", -1, dateToView)
nextMonth = DateAdd("m", 1, dateToView)
%>
<caption><a href="datePicker.asp?dateToView=<%=prevMonth %>&dBx=<%=dBx%>&mBx=<%=mBx%>&yBx=<%=yBx%>" title="View Previous Month (<%=monthName(month(prevMonth))%>)">&lt;&lt;</a> <%=monthName(month(dateToView))%> <%=year(dateToView)%> <a href="datePicker.asp?dateToView=<%=nextMonth %>&dBx=<%=dBx%>&mBx=<%=mBx%>&yBx=<%=yBx%>" title="View Next Month (<%=monthName(month(nextMonth))%>)">&gt;&gt;</a></caption>
<tr><th abbr="Sunday" title="Sunday">S</th><th abbr="Monday" title="Monday">M</th> <th abbr="Tuesday" title="Tuesday">T</th><th abbr="Wednesday" title="Wednesday">W</th><th abbr="Thursday" title="Thursday">T</th><th abbr="Friday" title="Friday">F</th><th abbr="Saturday" title="Saturday">S</th></tr>
<tr>
<%
'WRITTEN BY BOB MCKAY, FRESHMANGO.COM
columnCounter = 0
FOR fillLeadingEmptyDays = 1 TO (firstOfMonthDay - 1)
  columnCounter = columnCounter + 1
  Response.Write("<td></td>")
NEXT
FOR enterDays = 1 TO daysInCurrentMonth
    columnCounter = columnCounter + 1
    Response.Write("<td><a ")
    IF enterDays & "/" & month(dateToView) = day(date) & "/" & month(date) THEN Response.Write(" class = ""today""")
    dayLinkDestination = " javascript:applyDate(" & enterDays & "," & month(dateToView) & "," & year(dateToView) & ")"
    Response.Write(" href=""" & dayLinkDestination & """>" & enterDays & "</a></td>")
    IF columnCounter = 7 THEN
        Response.Write("</tr><tr>")
        columnCounter = 0
    END IF
NEXT
FOR fillEmptyDays = (columnCounter + 1) TO 7
    IF columnCounter = 0 THEN EXIT FOR
    Response.Write("<td></td>")
NEXT
%></tr>
</table>

Comment On This Article

Article Comments

  • 3

    Alan, 23:03
    05 February 2008

    Very Cool! I'd love to see a php version of this date picker!

  • 2

    Patrick, 10:22
    28 November 2007

    I have tried yet your script but let me tell you that your explanations surprised me a lot.
    I am not a programmer but I have to improve my WEBsite with a booking form.
    I think you have my solution.
    Bravo!

  • 1

    RealitySmash, 09:38
    09 May 2007

    Thanks, your date & calender fucntion really saved me alot of time
    & headaches. You guys rock.