From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.8: Numbers and Dates

It is very common in forms to want the user to enter numbers and dates. While it is certainly possible to just have normal text input for both these types of inputs, we tend to want a bit more control over these. With the numbers input type we sort of have this. How close you are depends on the browser. Most browsers, will have arrows that let you adjust the number and limit the range based on min and max attributes. If you want to increment/decrement at a different step, the step attribute determines the adjustment size that will be applied when selecting up or down. Using the arrows will enforce the range of the number. Typing in a number, however, does not.

While you have control over valid input, visually letting users know they have something invalid still requires JavaScript. With all the inputs that support validation, the onchange or oninput events can be used to call a method that adjusts the style based on the validity. The difference between onchange and oninput is that onchange only is called when the change is entered, while oninput is called as the input is being edited. As an example, say we had a number that we wanted to be in the range of 3 to 18. We would set up the input as follows:

Number between 3 and 18: 

And our validation function would look something like:

A more visual way of getting the user to input a number is with a slider that lets them select the number by moving a circle to the amount you wish. This is a bit trickier than it sounds as the slider does not show what the current value is. A slight bit of JavaScript can be used to display the slider value. If you have several sliders, you may want to write a generic function for doing this as shown here.

You will notice that I am requiring the caller provide the name of the element to change and the name of the element that displays the text for the control. This can be used by the range as follows:

Select number between 3 and 18:

Note that you do not need to specify ranges. If you do not have min and max attributes then the default values are 0 and 100.

Another very common type of input to request from the user is dates and times. The huge advantage of using a type for these is that most browsers will support some type of GUI popup making it easier for users to find an appropriate date.

Dates are in the yyyy-mm-dd format which is a nice format to use when programming as it is properly sorted. Just like with numbers, dates have min and max values, which are the date ranges that are valid for the input. The date also supports a step, with the number used being the number of days to change per step. The way dates (and all their related versions) look is browser dependent but most browsers will let you click a calendar icon and select the date using that calendar.

Please select a month: 

If you only need a particular month, you can use the month input type. It also supports min and max date ranges, though there is no need to specify the day portion. You can specify days, but it really isn’t useful if you only want months.

Weeks are a bit strange as weeks are used using the format 2024-W42. The W is used to tell the browser that you are wanting a week of the year, with weeks ranging from 01 to 52 with some years also having a W53. Again, normal date ranges will also work.

Select a week: 

Time selection is also an option. The common browsers tend to do this with number lists, instead of a clock display. Often using AM/PM instead of the more logical military time. While the display time may be in AM/PM, the min and max times should be in military time. Some browsers seem bad at restricting the time when using their GUI controls, but do still honor the validity when using checkValidity().

Enter a time: 

Finally, on some browsers, there is the datetime-local. It is a combination of date and time. When setting ranges you will be using the yyyy-MM-ddThh:mm format, for example 2024-10-21T08:42. Again, some browsers will validate fine but allow incorrect entry in their GUI input. It should also be noted that the timezone you are in is not retrievable or controlable with this control, so a separate input, such as options list (we will cover those shortly) will need to be added if timezone information is required.

Enter a date and time: 

We have covered a lot of input types, but there are still a few more to go, so we will be exploring the remaining input types next.