HTML5 | date attribute in <input> Tag

The date attribute in 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Output1

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Output2

Example 3: DOM for date attribute

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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() {
                var x = document.getElementById("dob").value;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>

chevron_right


Output:
Output3

Output in the phone:
Output4



My Personal Notes arrow_drop_up

सर्वशक्तिशाली इकलौता

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.