Home arrow JavaScript arrow Refining a Simple Date Picker with JavaScript and CSS

Refining a Simple Date Picker with JavaScript and CSS

In part one of this series, we looked at the HTML and CSS needed to construct the date-picker popup and style it accordingly. In this part, we are going to write the JavaScript that is going to make it work. This is going to be accomplished with a mixture of plain JavaScript with some DOM retrieval and manipulation.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 22
March 07, 2007
  1. · Refining a Simple Date Picker with JavaScript and CSS
  2. · Getting the day element
  3. · Refining the code
  4. · More refinements

print this article

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

All you'll need for this article is the source code from the first article and a simple text editor. In this text editor, add the first of the functions that we need: the function that allows the date picker to be opened. As the calendar has been hidden from display initially with CSS, we can adjust this rule dynamically using the DOM to alter the required element:

function showPicker() {
document.getElementById("picker").style.display = "block";

Don't forget to go back to the datepicker.htm file and add id="picker" to the picker div, and an onclick="showPicker();" call to the calendar image. You'll also need to link the newly created JavaScript file to the HTML file with something along the lines of

<script type="text/javascript" src="datepicker.js">

Next we need to get the date selected by the visitor and put it in the form field. There are essentially three elements to capture so we can start off by defining three empty variables:

var day = "";
var month = "";
var year = "";

We'll skip the function that gets the day for now and move on to the function that gets the month selected by the visitor:

function getMonth() {
var option = document.getElementById("month").selectedIndex;
month = document.getElementById("month").options[option].text;

First we get the option that has been chosen in the select box, and then we get the value of the text inside the selected option. The function that gets the selected year is equally as simple:

function getYear() {
var option = document.getElementById("year").selectedIndex;
month = document.getElementById("year").options[option].text;

Everything is the same except the id of the select box. You'll also need to go back to the HTML file and add the required ID and onchange attributes to the two select objects. Now we can go back to getting the selected day element.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

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