JAVASCRIPT

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

Poor Best

Rating:

/ 13

March 07, 2007

TABLE OF CONTENTS:

That's one more problem solved, but further experimenting with the datepicker will reveal that switching between months that have 30 days will also create similar problems to those that we just fixed. You'll need to go back to the first branch of the if statement and add the code shown in bold below:

if (month == "April" || month == "June" || month == "September" || month == "November") {
   var unday = document.getElementById("D31");
   if (unday.className == "datelive") {
     unday.className = "dateunlive";
     unday.removeChild(unday.childNodes[0]);
     unday.removeAttribute("href");
     unday.removeAttribute("onclick");
   } else {
     var newday1 = document.getElementById("D30");
     var newday2 = document.getElementById("29");
     newday1.className = "datelive";
     newday1.setAttribute("href", "#");
     if (!window.ActiveXObject) {
       newday1.setAttribute("onclick", "getDay(30)");
     }
     if (!newday1.childNodes[0]) {
       var newdaytext1 = document.createTextNode("30");
       newday1.appendChild(newdaytext1);
     }
     newday2.className = "datelive";
     newday2.setAttribute("href", "#");
     if (!window.ActiveXObject) {
       newday2.setAttribute("onclick", "getDay(29)");
     }
     if (!newday2.childNodes[0]) {
       var newdaytext2 = document.createTextNode("29");
       newday2.appendChild(newdaytext2);
     }
    }

There are also some additions that need to be made to the branch of the if statement that checks for the month of February. Again, add the code in bold below to the existing code:

} else if (month == "February") {
var unday1 = document.getElementById("D31");
var unday2 = document.getElementById("D30");
var unday3 = document.getElementById("D29");
if (unday1.className == "datelive") {
    unday1.className = "dateunlive";
    unday1.removeChild(unday1.childNodes[0]);
    unday1.removeAttribute("href");
    unday1.removeAttribute("onclick");
}
if (unday2.className == "datelive") {
    unday2.className = "dateunlive";
    unday2.removeChild(unday2.childNodes[0]);
    unday2.removeAttribute("href");
    unday2.removeAttribute("onclick");
}
if (unday3.className == "datelive") {
    unday3.className = "dateunlive";
    unday3.removeChild(unday3.childNodes[0]);
    unday3.removeAttribute("href");
    unday3.removeAttribute("onclick");
}
}

So, we finally come to the end of the function that controls which days are shown and are available for selection. We've also written the code that makes the datepicker appear and alerts the user if they try to choose the day part of the date first. This is all there is in this part of the series. In the next article we'll look at the additional code needed to include leaps years to make the code completely accurate. Getting the selected date into the form field will also be discussed.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.