HTML5| Date Attribute In <Input> Tag

Posted By Bajarangi soft , Posted On 08-10-2020

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

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>

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

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

Example 3:
DOM for date attribute

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