Виджет календаря не работает?Использование классов Date и объектно-ориентированного JavaScript

Question

Я учусь в колледже на JavaScript и пытаюсь следовать одной из глав практических активностей (используя учебник «JavaScript: серия веб-воинов» Саши Водника и Дона Госселина в главе 7).Предполагается создать виджет календаря, который не отображается.Моя конечная цель - показать время, прошедшее с даты, введенной пользователем.

Это код, указанный в учебнике.Я скопировал его точно так же, как есть, дважды проверил на наличие ошибок и использовал инструменты отладки.Инструменты разработчика Google Chrome не указывают на ошибки.

Код JS:

var dateObject = new Date();

function displayCalendar(whichMonth) {
var dateObject =  new Date();
var date;
var dateToday = newDate();
var dayOfWeek;
var daysInMonth;
var dateCells;
var captionValue;
var month;
var year;
var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "Decemeber"];
if (whichMonth === -1) {
    dateObject.setMonth(dateObject.getMonth() - 1);
} else if (whichMonth === 1) {
    dateObject.setMonth(dateObject.getMonth() + 1);
}

month = dateObject.getMonth();
year = dateObject.getFullYear();
dateObject.setDate(1);
dayOfWeek = dateObject.getDay();
captionValue = monthArray[month] + " " + year;
document.querySelector("#cal table caption").innerHTML = captionValue;

if(month === 0 || month === 2 || month === 4 || month === 6 || month === 7 || month === 9 || month === 11) { // Jan, Mar, May, Jul, Aug, Oct, Dec
    daysInMonth = 31;
} else if (month === 1) { // Feb
    if (year % 4 === 0) { //leap year test
        if (year % 100 === 0) {
            // year ending in 00 not a leap year unless
            // divisible by 400
            if (year % 400 === 0) {
                daysInMonth = 29;
            } else {
                daysInMonth = 28;
            }
        } else {
            daysInMonth = 29;
        }
    } else {
        daysInMonth = 28;
    }
} else { //Apr, Jun, Sep, Nov
    daysInMonth = 30;
}

dateCells = document.getElementsByTagName("td");
for (var i = 0; i < dateCells.length; i++) {
    // clear existing table dates
    dateCells[i].innerHTML = "";
    dateCells[i].className = "";
}

for (var i = dayOfWeek; i < daysInMonth + dayOfWeek; i++) {
    // add dates to days cells
    dateCells[i].innerHTML = dateObject.getDate();
    dateCells[i].className = "date";
    if (dateToday < dateObject) {
        dateCells[i].className = "futuredate";
    }
    date = dateObject.getDate() + 1;
    dateObject.setDate(date);

    dateObject.setMonth(dateObject.getMonth() -1);
    // reset month to month shown
    document.getElementById("cal").style.display = "block";
    // display calendar if it's not already visible
}

function selectDate(event) {
    if (event === undefined) { //get caller element in IE8
        event = window.event;
    }
    var callerElement = event.target || event.srcElement;
if (callerElement.innerHTML === "") {
    //cell contains no date, so don't close the calendar
    document.getElementById("cal").style.display = "block";
    return false;
}
dateObject.setDate(callerElement.innerHTML);

var fullDateToday = new Date();
var dateToday = Date.UTC(fullDateToday.getFullYear(), fullDateToday.getMonth(), dateObject.getDate());
if (selectedDate <= dateToday) {
    document.getElementById("cal").style.display = "block";
    return false;
}
document.getElementById("tripDate").value = dateObject.toLocaleDateString();
}


function CreateEventListeners() {
    var dateField = document.getElementById("tripDate");
        if (dateField.addEventListener) {
            dateField.addEventListener("click", displayCalendar, false);
        } else if (dateField.attachEvent) {
            dateField.attachEvent("onclick", displayCalendar);
        }

if (window.addEventListener) {
    window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", createEventListeners);
}
    var dateCells = document.getElementsByTagName("td");
    if (dateCells[0].addEventListener) {
        for (var i = 0; i < dateCells.length; i++) {
            dateCells[i].addEventListener("click", selectDate, false);
        }
    } else if (dateCells[0].attachEvent) {
        for (var i = 0; i < dateCells.length; i++) {
            dateCells[i].attachEvent("onclick", selectDate);
        }
    }
}