Refining a Simple Date Picker with JavaScript and CSS

The datepicker div can now react to changes in any of the months that have less than 31 days by removing the days that don't exist. The only problem is, if someone chooses one of the months that have less than 31 days and then changes their mind and chooses one of the months that do have 31 days, the additional day is not brought back. How we can get around this? Well, one way is to add another branch of the if statement that looks for months that have 31 days, and then re-add the yellow styling, link and numericals that denote the live day blocks:

} else if (month == "January" || month == "March" || month == "May" || month == "July" || month == "August" || month == "October" || month == "December") {
   var newday1 = document.getElementById("D31");
   var newday2 = document.getElementById("D30");
   var newday3 = document.getElementById("D29");
   newday1.className = "datelive";
   newday1.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday1.setAttribute("onclick", "getDay(31)");
   }
   var newdaytext1 = document.createTextNode("31");
   newday1.appendChild(newdaytext1);
   newday2.className = "datelive";
   newday2.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday2.setAttribute("onclick", "getDay(30)");
   }
   var newdaytext2 = document.createTextNode("30");
   newday2.appendChild(newdaytext2);
   newday3.className = "datelive";
   newday3.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday3.setAttribute("onclick", "getDay(29)");
   }
   var newdaytext3 = document.createTextNode("29");
   newday3.appendChild(newdaytext3);
 }
}

The yellow style is brought back by manipulating the attribute and the numerical text is re-added using basic DOM methods. The if statement that checks that the window.ActiveXObject does not exist is for Firefox only. For some reason, Firefox loses the onclick attribute somewhere in between removing the day and re-adding it, so this needs to be re-added with code. IE does not lose the attribute and therefore does not need any additional code.

If you test the above code, you'll find that it works; however, if you select a month with 31 days, and then another one with 31 days, the day square has the text node 31 added twice. This is easily countered by wrapping parts of the code in if statements that check whether the text node is there before adding it. Add the code in bold below to the above code:

} else if (month == "January" || month == "March" || month == "May" || month == "July" || month == "August" || month == "October" || month == "December") {
   var newday1 = document.getElementById("D31");
   var newday2 = document.getElementById("D30");
   var newday3 = document.getElementById("D29");
   newday1.className = "datelive";
   newday1.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday1.setAttribute("onclick", "getDay(31)");
   }
   if (!newday1.childNodes[0]) {
     var newdaytext1 = document.createTextNode("31");
     newday1.appendChild(newdaytext1);
   }
   newday2.className = "datelive";
   newday2.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday2.setAttribute("onclick", "getDay(30)");
   }
   if (!newday2.childNodes[0]) {
     var newdaytext2 = document.createTextNode("30");
     newday2.appendChild(newdaytext2);
   }
   newday3.className = "datelive";
   newday3.setAttribute("href", "#");
   if (!window.ActiveXObject) {
     newday3.setAttribute("onclick", "getDay(29)");
   }
   if (!newday3.childNodes[0]) {
     var newdaytext3 = document.createTextNode("29");
     newday3.appendChild(newdaytext3);
   }
 }
}