Skip to content
Related Articles

Related Articles

HTML5 | date attribute in <input> Tag
  • Difficulty Level : Basic
  • Last Updated : 03 Dec, 2018

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




<!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>
    <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




<!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>

Output:
Output3

Output in the phone:
Output4

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :