Date and Time Input Types of HTML 5

Sourabh Somani
Apr 09, 2024

50.5k
0
5
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

This article explains how to use the HTML 5 Date and Time Input Types. As we know HTML 5 has many features, one of the good features is, that it comes with many new input types date, time, month, and week attributes. You have seen in many ticket booking sites you have come across with a date picker or a date and time picker. Using the date and time picker you can easily and quickly pick the date, before HTML 5 we did this work by using JavaScript, jQuery, or AJAX library. But in HTML 5 we have some new input types for a date, time, date-time, month, week, and so on. These tags are so easy to use and also very pretty and straightforward.

Date Input Type

This tag allows users to select the date only. The following shows how to use this input type.

<input type="date" name="date1" id="date1"/>

Example

<!DOCTYPE html>
<html lang="en">
    <body>
        Date:<input type="date" name="date1" id="date1"/> <br/>
    </body>
</html>

DateTime-Local Input Type

This tag allows users to select a date and time. The following shows how to use this input type.

<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/>

Example

<!DOCTYPE html>
<html lang="en">
    <body>
        DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>
    </body>
</html>

Time Input Type

This tag allows the user to select a time only. The following shows how to use this input type:

<input type="time" name="time1" id="time1"/>

Example

<!DOCTYPE html>
<html lang="en">
    <body>
        Time:<input type="time" name="time1" id="time1"/><br/>
    </body>
</html>

Month Input Type

This tag allows the user to select a month and year. The following shows how to use this input type.

<input type="month" name="month1" id="month1"/>

Example

<!DOCTYPE html>
<html lang="en">
    <body>
        Month:<input type="month" name="month1" id="month1"/> <br/>
    </body>
</html>

Week Input Type

This tag allows the user to select a week with a year. Mainly every year, the week will start in January. It gives us an integer number for a week and a year. The following shows how to use this input type.

<input type="week" name="week1" id="week1"/>

Example

<!DOCTYPE html>
<html lang="en">
    <body>
        Week:<input type="week" name="week1" id="week1"/> <br/>
    </body>
</html>

Now I will create a simple web page for this in which all the date and time input types will be. The page code is as given below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function processData(date, dateTimeLocal, time, month, week) {
            var v1 = document.getElementById(date).value;
            var v2 = document.getElementById(dateTimeLocal).value;
            var v3 = document.getElementById(time).value;
            var v4 = document.getElementById(month).value;
            var v5 = document.getElementById(week).value;
            alert(v1 + "\n" + v2 + "\n" + v3 + "\n" + v4 + "\n" + v5);
        }
    </script>
</head>
<body>
    <h2>Well-Come to Date-Time Input Types of HTML-5</h2>
    Date:<input type="date" name="date1" id="date1"/> <br/>
    DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>
    Time:<input type="time" name="time1" id="time1"/> <br/>
    Month:<input type="month" name="month1" id="month1"/> <br/>
    Week:<input type="week" name="week1" id="week1"/> <br/>
    <input type="button" value="Click Me..." onclick="processData('date1','dateTimeLocal1','time1','month1','week1');">
</body>
</html>

The output of the code above