Browse DevX
Sign up for e-mail newsletters from DevX


Simplifying Date Data Entry with Calendars, Part I-2 : Page 2




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Getting All the Pieces Together
Let's consider an example. You have a Web form that has four different date fields to be filled in. These are the estimated and actual beginning and ending dates of a project.

To get users to select the dates from your calendar interface—you should provide four "browse" buttons next to the text boxes. Clicking on the buttons brings up a calendar page that the user can select a date from. The interface will look like this:

If you want to get fancy and improve user comprehension, you can replace the four buttons with a calendar icon. Here's an example:


Below is the page that displays when the icon is clicked. They can select any date and even navigate from month to month.

When the user selects a date, the calendar window closes and the text box on your original form is populated with their selection. The user shouldn't be able to type anything in the text box.

My calendar is actually two separate HTML tables. The top table is the gray one containing the month and the arrow graphics. The bottom table contains the dates, two horizontal lines and the "Today" button. When the arrows in the top table are clicked, the page refreshes with the same table for the previous or following month. So at all times, the ASP page needs to know two things—what month and what year to display. These two values are sent as arguments via the query string to the page when the ASP page is called.

I began with a new ASP page called "calpop.asp"

<%@ LANGUAGE="VBSCRIPT" %> <% Option Explicit '----------- WEB SITE: YOUR WEB SITE NAME ------------ ' File Name: calpop.asp ' ' Purpose: ' Displays a pop up Calendar ' ' Arguments: ' m = month to display, default to current month ' y = year to display, default to current year ' ' Author: Rama Ramachandran ' Imperium Solutions ' http://www.imperium.com ' Internet: rama@imperium.com ' ' Date Created: ' 11/20/2000 ' ' Modification History: ' %>

Now you are ready to begin coding for the page. First, declare a few variables:

'------------------------------------------------------ ' All your ASP preprocessing code goes here '------------------------------------------------------ ' -- Declare Variables Dim intM ' Cur Month Dim intY ' Cur Year Dim intFDay ' First day of the month Dim intNoDays ' Number of days in the month Dim intMPrev ' Previous Month Dim intYPrev ' Previous Year Dim intMNext ' Next Month Dim intYNext ' Next Year

Now, figure out what month and year you wish to display. You get this value from the Request object and if it is blank, you can assume the current month and current year.

' -- What month and year are we displaying the calendar for intM = Request("m") ' -- if blank, use current month If intM = "" Then intM = Month(Date()) End If intY = Request("y") ' -- if blank, use current year If intY = "" Then intY = Year(Date()) End If

In order to draw a calendar, the only other information needed is to figure out what day of the week the month begins on and how many days there are in that month. Stay away from ASP calendar code on the Web or in textbooks where these values are unnecessarily hard-coded or coded with a lot of if statements and select case statements. VBScript has built in functions that can make it very easy to calculate the days.

intFDay = WeekDay(intM & "/01/" & intY) intNoDays = DateDiff("d", _ intM & "/01/" & intY, _ DateAdd("m", 1, intM & "/01/" & intY) _ )

Use the "WeekDay" function to identify the day of the week for the first of the month, then use the DateAdd and the DateDiff to fill out the rest of the days in the month. Notice the line continuation characters ( _) in the code above. This calculation automatically takes care of odd months such as February as well as leap year scenarios—all with one line of code!

To allow the user to go back and forward one month at a time you need to know the previous and next month/year values. Let us calculate them now, again, using built-in functions:

' -- Figure out the previous and next months also intMPrev = Month(DateAdd("m",-1,intM & "/01/" & intY)) intYPrev = Year(DateAdd("m",-1,intM & "/01/" & intY)) intMNext = Month(DateAdd("m",1,intM & "/01/" & intY)) intYNext = Year(DateAdd("m",1,intM & "/01/" & intY))

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date