Refining a Simple Date Picker with JavaScript and CSS - More refinements

(Page 4 of 4 )

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.

Comments On: Refining a Simple Date Picker with JavaScript and CSS

· This part of the tutorial looks at some of the JavaScript to make the calender div...   >>> Post your comment now!