Home arrow Style Sheets arrow Creating a Simple Date Picker with JavaScript and CSS

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
Rating: 4 stars4 stars4 stars4 stars4 stars / 80
February 21, 2007
  1. · Creating a Simple Date Picker with JavaScript and CSS
  2. · An Example Form
  3. · The Calendar Popup
  4. · The CSS

print this article

Creating a Simple Date Picker with JavaScript and CSS
(Page 1 of 4 )

A downloadable zip file is available for this article.

Internet forms are a chore; every time you want to join a forum, or buy something from a site, or even download something from some sites you face the exciting prospect of yet another form to complete, and they're getting longer. I'm sure of it. Sometimes it's enough to put me off doing whatever it is I wanted to do and go someplace else instead. Anything that makes forms easier to fill out is a plus, for me and for many other surfers like me.

Any site that accepts data through forms is going to want that data to be entered in a particular format and with a particular structure. Ensuring that this happens means validating the data entered by the user. One thing that it can be cumbersome to validate is dates, not because they're particularly difficult in themselves, but because there are so many formats that people use to specify dates.

One way of making your forms easier for visitors to complete and therefore not so tiresome, as well as ensuring all of your dates come into the server in the preferred format, is to include a date picker next to any fields that require a date to be entered. With just a bit of client-side JavaScript and a little CSS, you can quickly code an attractive addition to your forms that saves time for everyone. All you'll need to follow this article is a plain old text editor.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials