Completing a Simple Date Picker with JavaScript and CSS
(Page 1 of 4 )
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.
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");
leapday.appendChild(leapdaytext);
}
}
} else {
if (month == "February") {
if (document.getElementById("D29").className == "datelive") {
var unleapday = document.getElementById("D29");
unleapday.className = "dateunlive";
unleapday.removeChild(unleapday.childNodes[0]);
unleapday.removeAttribute("href");
unleapday.removeAttribute("onclick");
}
}
}
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");
unday3.appendChild(undaytext1);
}
}
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.
Next: Focusing on Visitor Selections >>
More JavaScript Articles
More By Dan Wellman
