How to use the type=”date” Attribute In HTML
The HTML input element with type=”date” generates a date picker in compliant browsers. However, the displayed date format isn’t consistently dd-mm-yyyy; it varies by browser, potentially complicating strict format enforcement.
Syntax:
<input type="date">
Example 1: In this example we set an input type as date, allowing users to choose dates from a calendar, but the format may vary by browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Setting input type date in dd-mm-yyyy
format using HTML
</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h3>
Setting input type date in dd-mm-yyyy format
</h3>
<label for="start">
Enter the Date:
</label>
<input type="date" name="begin" placeholder="dd-mm-yyyy"
value="" min="1997-01-01" max="2030-12-31">
</body>
</html>
Output:
input type date in dd-mm-yyyy format using HTML Example Output
Example 2: The HTML input type “date” with the “range” attribute sets a date picker allowing selection within a specified range but doesn’t enforce dd-mm-yyyy format.
<!DOCTYPE html>
<html>
<head>
<title>
Setting input type date in
dd-mm-yyyy format using HTML
</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h3>
Setting input type date in dd-mm-yyyy format
</h3>
<label for="start">
Enter the Date:
</label>
<input type="date" name="begin"
placeholder="dd-mm-yyyy" value=""
min="1997-01-01" max="2030-12-31">
</body>
</html>
Output:
input type date in dd-mm-yyyy format using HTML Example Output
How to set input type date in dd-mm-yyyy format using HTML?
To set and get the input type date in dd-mm-yyyy format, use the <input> type attribute, allowing date selection. 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. Define the date range with min and max attributes.
Note: Defaults: min=”01-01-1920″, max=”01-01-2120″.