Creating a Simple Date Picker with JavaScript and CSS - An Example Form
(Page 2 of 4 )
Initially, you'll need an example form, with some date fields on it. I won't waste time by using an elaborate form, so we'll just have a couple of example fields on it that will serve to illustrate the date picker. Something like the following should suffice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd>
<html lang="en">
<head>
<title>Date Picker Example</title>
<head>
<body>
<h1>A Generic Form</h1>
<div>
<form action="">
<span> Enter A Date:</span><input type="text"><img
src="calendar.gif" alt="Datepicker">
</form>
</div>
</body>
</html>
We begin with the DOCTYPE, naturally, then a basic page with a basic form on it. The lang attribute of the HTML element is included for validity. Save this as datepicker.html or something similar. Now we can add some CSS to make the page look a little more appealing and line things up better. Add the following selectors and rules to a new page in your text editor:
h1 {
font-family:arial, sans-serif;
color:#003399;
border-bottom-width:3px;
border-bottom-color:#ffcc00;
border-bottom-style:solid;
}
img {
position:relative;
top:10px;
padding-left:10px;
}
.text {
font-family:arial, sans-serif;
color:#003399;
padding-right:10px;
}
.textbox {
border-width:1px;
border-color:#ffcc00;
border-style:solid;
}
You'll also need to go back to the HTML and add the code shown in bold below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd>
<html lang="en">
<head>
<title>Date Picker Example</title>
<link rel="stylesheet" type="text/css"
herf="datepicker.css">
<head>
<body>
<h1>A Generic Form</h1>
<div>
<form action="">
<span class="text">Enter A Date:</span><input
class="textbox" type="text"><img src="calendar.gif"
alt="Datepicker">
</form>
</div>
</body>
</html>
So now it should look adequate for this example.
Next: The Calendar Popup >>
More Style Sheets Articles
More By Dan Wellman
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 20 
