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

Completing a Simple Date Picker with JavaScript and CSS

Welcome to the unforeseen third part in the series on creating a JavaScript and CSS based datepicker that you can use to enhance your web forms. In part two we looked at the code needed to make the datepicker display the correct number of days for each month. Now visitors can choose a month, change their mind and choose another month and the number of days will change (or stay the same) to reflect this.

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 13
March 14, 2007
  1. · Completing a Simple Date Picker with JavaScript and CSS
  2. · Focusing on Visitor Selections
  3. · Adding the datestring
  4. · Finishing up

print this article

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

In this part we're going to look at the additional code we need to adjust the datepicker to cater to leap years, and the code that adds the selected date back to the form field. Open up datepicker.js in your text editor and we'll make a start with the leap year addition.

In this example, the date range is quite small and features only two leap years, but the ability to detect more is easily worked into the function. Add the following code to the getYear() function:

if (year == "2008" || year == "2004") {
if (month == "February") {
var leapday = document.getElementById("D29");
leapday.className = "datelive";
leapday.setAttribute("href", "#");
if (!window.ActiveXObject) {
leapday.setAttribute("onclick", "getDay(29)");
if (!leapday.childNodes[0]) {
var leapdaytext = document.createTextNode("29");
} else {
if (month == "February") {
if (document.getElementById("D29").className == "datelive") {
var unleapday = document.getElementById("D29");
unleapday.className = "dateunlive";

If you remember from part two, the function that the above code resides in is fired when the Year drop-down box value changes. First, the if statement checks whether the year selection matches any of the leap years in our range. If it does, it then checks that the month is equal to February. Provided these two conditions are met, the script styles the number 29 day block with a yellow background and adds the href and className. It then checks to make sure that the element node doesn't already have a child node, and if not, adds one.

If the year variable doesn't match either of the leap years, the script again checks that the month is equal to February, and if so, gets the element for day 29 and checks that the class is currently equal to "datelive." If it is equal, we then set a variable to represent the element and change the day back to an unselectable day by removing the attributes and child node (which is the text content), and changing the className.

Now, if you open up the datepicker and choose the month February, then either the year 2004 or 2008, the 29 day becomes selectable. Change it to another year and day 29 disappears once more. The only problem is, if you set the year to a leap year before setting the month, day 29 does not appear. Why is this? The problem is that the changes we've made so far are only fired when the year drop-down changes, not when the month drop-down changes. Now we could set another prompt to make our visitors choose the month drop-down first, but I think we're being manipulative enough by making them choose the day last. What we can do instead is add a little more code to the getMonth() function:

if (year == "2004" || year == "2008") {
unday3.className = "datelive";
unday3.setAttribute("href", "#");
if (!window.ActiveXObject) {
unday3.setAttribute("onclick", "getDay(29)");
if (!unday3.childNodes[0]) {
var undaytext1 = document.createTextNode("29");

This additional conditional branch should be added to the end of the code that deals exclusively with the month of February. It again checks for either of our leap years, and then makes day 29 appear live. Great, our visitors can now choose any combination of month and year, and only have access to correct dates.

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