STYLE SHEETS

Creating a Simple Date Picker with JavaScript and CSS

Getting visitors to fill out certain parts of forms can be tricky, especially when the item you want them to fill out can be rendered in many different formats. Consider how many different ways one can write a date, for instance. In this first part of a two-part article, you will learn how to build a date picker that minimizes this headache.

Author Info:

By: Dan Wellman

Poor Best

Rating:

/ 58

February 21, 2007

TABLE OF CONTENTS:

· Creating a Simple Date Picker with JavaScript and CSS
· An Example Form
· The Calendar Popup
· The CSS

<!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>