Building the Current Year with a Web Page Calendar

First there is the yearMonth Boolean variable, initialized to false. If the date and month entered are realistic, then this variable will be set to true, and because of that, we shall be able to call the showMonth() function to display the month of your choice.

The DOM offers only one dialog box format for you to input data. The syntax to achieve this is

returnValue = prompt(“Instruction to user”, “default Input”)

The dialog box produced has only one Input Text control. It can receive only one input value.

In our code, the value you type in is held in the year variable. JavaScript’s date object can handle dates from 1900 upwards. The next statement is an if-statement. It tests to see if the year is greater than or equal to 1900, and if it consists of 4 digits. If this is okay, it sets the yearMonth variable to true. If it is not okay, it displays an error message and sets the yearMonth variable to false.

The next thing the function has to do is prompt the user with another dialog box for the input of the month. However, if the year you entered in the first prompt is wrong, then there is no point in prompting the user for the month, since both year and month have to be correct.

The statement to check the above is an if-statement. It first of all checks to see if the yearMonth variable is true; that is, if the year entered was realistic. If it is realistic, it prompts the user for the month. For simplicity, the user is asked to enter the month in figures. The value you type in for the month is held in the month variable.

Our if-statement has an inner if-statement. This inner if-statement checks to see if the month entered is realistic. To be exact, it checks to see if the month is equal to or greater than 1, and if it is less than or equal to 12. If this is okay, it resets the yearMonth variable to true and decrements the month variable. The month variable has to be decremented, since the JavaScript date object knows months from 0 to 11 and not 1 to 12 as the user knows them. If the test is not okay, the inner if-statement issues an error message and sets the yearMonth variable to false.

The last code segment of the code is an if-statement. It is not inside our previous if-statement; it is on its own inside the function. It tests if the yearMonth Boolean variable is true; that is, if the year and month entered are realistic. If this is okay, then it creates a new date object using the year and month entered by the user. It then calls the showMonth() function passing this date object as argument and an empty string, “” also as argument.

Recall that this function is called when you click the Show any Month’s Calendar button; so you have to call the showMonth() function with the date object of the user’s choice. An empty string is passed, so that the showMonth() function should know that we are not dealing with the current month; we are dealing with a specific month.

When creating the date object with the constructor function, the position of the month day number had the value of 1. The choice of 1 is not important here. This position should not be left empty; that is why I put in the number 1.

I wrote an article (series) titled "Producing Web Page Dialog Boxes." If you want a better (custom) dialog box, you should read this series. You'll learn how to input the year and month in one dialog box. You can also learn to do many things (coding) that are convenient for the user.