The JavaScript Date Picker

Sooner or later you’re going to have the need for a user to fill in a field with a date. It’s like Murphy’s Law, it’s inevitable. In any event, one nice way of handling the situation is to provide some kind of widget to allow the user to pick the date instead of having them type the date in manually. Typing in dates manually can often be a problem, especially with a global medium like the web; Americans write 3 January 1/3; Europeans write 3/1. Are your dates 03/01/04? 3/1/04? 1/3/04? 1/3/2004? A date picker, when a user clicks on a date from a calendar-like interface can smooth the process.
 
Such a widget provides a couple of nice features. First of all, it helps you make sure the application gets good data. While it’s quite easy for the user to mistype a date, a correctly built script can place a correctly formatted date in your field 100% of the time.

This tutorial builds the Date Picker in JavaScript. You can cut and paste the code into your own appliciations.

This tutorial is for the intermediate developers in JavaScript.

$2.79
- OR -

Overview

Table of Content:

  • How it looks
  • How it functions
  • Setup: HTML and CSS
  • Setting up the script
  • The main script
    • FormatDate()
    • Next and Previous
    • The First Day
    • Calendar Header
    • FormatRawDate()
    • Build the Calendar
    • Closing it up
    • The SelectDate() Function
    • Full Script Listing
  • Conclusion
  • Coda

Reviews

Be the first to write a review

You must me logged in to write a review.