Refining a Simple Date Picker with JavaScript and CSS

For this, we first need to go back to the HTML document and add some additional code. The function that captures the day that has been selected will rely on a parameter being passed to it by the element that makes the function call. For each day element in the HTML file, add the following code, changing the parameter for each day:

onclick="getDay(1)"

While you have the HTML file open, you need to make a couple of other minor changes. First, to stop the web page causing the parent folder to open when a day in the datepicker is selected, just add the # symbol to all of the href attributes of the day links. Second, to make the page valid, you'll need to change the ID attributes of the three days that have an ID (29, 30 and 31). Add the letter D to the beginning of each one, making them D29, D30 and D31 respectively.

The function back in the JavaScript file that captures the day that was selected simply sets the day sent as a parameter to the day variable declared at the top of the file:

function getDay(Day) {
   day = Day;
}

I mentioned before that the function handling the day elements would be a little more complicated than the other two functions. The reason for this is that as things stand now, a visitor could select the month of February and the day of the 31^st. Such a date does not exist, however, so we should therefore ensure that it cannot be selected. We also need to factor in leap years.

First of all, we can make it so that the month and the year should be selected first. If the visitor selects a day first, we can let them know that they should choose the month and year first. Add the code in bold below to the getDay() function:

function getDay(Day) {
   if (month == "" || year == "") {
     alert("Please choose the Month and Year first");
     return false;
   } else {
     day = Day;
   }
}

The code checks whether either of the two variables are still empty, and alerts the visitor if so. If both the variables contain data, the script proceeds to set the variable with the visitor's choice. This alone however won't take the days that don't exist out of the date picker. To do this, we need to add some more code to the getMonth() function.

Below the second line of the function add the following if statement:

if (month == "April" || month == "June" || month == "September" || month == "November") {
   var unday = document.getElementById("31");
   unday.className = "dateunlive";
   unday.removeChild(unday.childNodes[0]);
   unday.removeAttribute("href");
   unday.removeAttribute("onclick");

So we check whether the month variable matches any of the months that have 30 days, and if so, get the element with an ID of 31 in a variable called unday. We then set the class to dateunlive and remove the text node (the number in the box) followed by the href and onclick attributes which changes the block from yellow to gray. As you can see, I've left out February. More days need to be altered with February so the else if statement that catches this month is also longer, but essentially the same as the above code:

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