|
Date Picker For Your Web Site
By Stephen Bucaro
If you have a form that requires users to enter a date, you have three design
choices. 1. Let them look up a date on their wall calendar. Then you have to
specify the format in which they must enter the date. 2. Provide drop-down
lists to choose a date. This method is crude by today's standards, and it
doesn't allow the visitor to view the day of the week or intervals between
dates. 3. Provide a date picker calendar.
A date picker calendar lets the user scroll through calendars to select a month,
then click on a date which will automatically be entered into a form in the
proper format. In this article, I'll give you the code for a date picker calendar
and I'll explain the code in detail so you'll feel comfortable modifying it
for your own use.
To follow along, open an ASCII text editor like Windows Notepad and type in
the html code for a skeletal Web page as shown below.
<html>
<head>
<style>
</style>
<script language="JavaScript">
</script>
</head>
<body>
<form name="form1">
Date: <input type="text" name="dateInput"
id="dateInput"size="10">
</form>
<span class="calendar" id="calendar">
</span>
</body>
</html>
In the head section of the Web page, the code defines an embedded style block
delimited by style tags (<style> </style>). Our style rules will be
entered between these two tags. In the head section, the code also defines a
Java Script code block delimited by script tags (<script language="JavaScript">
</script>). We will enter Java Script code between these two tags.
In the body section of the Web page, the code defines a form with a single text
input box. Your form may include several date input text boxes along with other
form controls. Below the code for the form is the code for an html span. Java
Script code will be used to draw the date picker calendar inside this span.
| 
Free Downloads
RSS Feed