Open In App

HTML5 date attribute in <input> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The date attribute in the input tag creates a calendar to choose the date, which includes day, month, and year.

Syntax:

<input type = "date">

Example 1: Use date attribute in input tag

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Date Attribute</title>
</head>
 
<body>
    <form action="/">
        Date of Birth: <input type="date">
    </form>
</body>
 
</html>


Output:

Output1

Example 2: Initializing the default date value in input tag. The date format is value = “yyyy-mm-dd” in input tag

html




<html>
 
<head>
    <title>Date Attribute</title>
</head>
 
<body>
    <form action="/">
        Date of Birth:
        <input type="date"
               value="2018-10-19">
    </form>
</body>
 
</html>


Output:

Output2

Example 3: DOM for date attribute

html




<!DOCTYPE html>
<html>
    <head>
        <title>Date Attribute</title>
    </head>
    <body>
        Date of Birth:
        <input type="date" id="dob">
        <button onclick="dateDisplay()">
          Submit
          </button>
        <p id="demo"></p>
        <script>
            function dateDisplay() {
                let x = document.getElementById("dob").value;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>


Output:

Output3

Output in the phone:

Output4



Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads