Style Sheets
  Home arrow Style Sheets arrow Creating a Simple Date Picker with JavaScr...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Creating a Simple Date Picker with JavaScript and CSS
By: Dan Wellman
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 28
    2007-02-21

    Table of Contents:
  • Creating a Simple Date Picker with JavaScript and CSS
  • An Example Form
  • The Calendar Popup
  • The CSS

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Creating a Simple Date Picker with JavaScript and CSS


    (Page 1 of 4 )

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

    More Style Sheets Articles
    More By Dan Wellman


       · Hi Everyone, thanks for reading. The date picker is a useful addition to anyone...
       · The .picker style specifies display:none...so if you wonder why your calendar...
       · The display style is dynamically changed with JavaScript in the next article, which...
       · hey dear when will be the next part published
       · Hi, the next part of the tutorial has been published, it can be found at...
       · its very nice. But somehow I am unable to get the calender when click on calender...
       · Do you get any javascript errors?
       · I got some errors at first as well... you have to be very precise in assembling all...
       · Hi... I really liked this 4 part series. There is one aspect of this project which...
       · These images do contain the orange fill but they are slices 1px wide to save in...
       · hmmm... somehow all of the code I posted between the html tags didn't make it in...
       · Hi,very good job. I'd like to use your datePicker but the provided ZIP file...
       · what's your email Marion, I'll mail it to youRegardsDan
       · Bull shit - dude I extract the whole files and it did not even work Hahahah...
       · Sorry to hear you can't get it working, are you getting any JS errors?Do you...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek