HTML Date Input: value, min, max, step, and Date Format
HTML <input type="date"> provides a control for a year, month, and day. Its calendar appearance and displayed order can vary by browser and locale, but value and submitted values are normalized to YYYY-MM-DD. They do not include a time or time zone.
Set an initial date and allowed range
Use value for the initial date and min/max for the earliest and latest allowed dates. Both boundaries are included. Attributes need valid date strings rather than localized display text such as “May 20, 2030.” Invalid min or max values may not impose the intended restriction.
name is the submitted field name and id associates the label. Use required for mandatory input. A range does not make every browser prevent date entry in the same way; an out-of-range date entered directly fails constraint validation.
Complete example: inspect the date string and validity
Save the following document as date-demo.html and open it in a browser. It displays a date chosen within May 2030 for practice, without making a booking or sending data to a server.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inspect date input values</title>
</head>
<body>
<h1>Visit date practice</h1>
<form id="demo">
<label for="visit">Visit date (May 2030, required)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Show value</button>
<button type="reset">Reset</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Submit the initial date to display
visit = 2030-05-20 - Choose another May date and submit to display its date string. A date outside the range is blocked by min/max validation.
- Clear the date and submit: required validation blocks it. Reset returns to May 20.
The step unit is days and its default is 1. Change only step to 7 in the example: May 1, the min date, becomes the base, so May 1, 8, 15, 22, and 29 fit the interval. The initial May 20 value no longer fits. Compare a valid May 8 selection, then restore step to 1 to allow every day. A single step setting does not implement a business calendar with weekends or holidays.
Display formats, time zones, and server validation
Do not put slashes or localized strings in value to change the locale-specific date picker. If you need only a calendar date, treating it as a string avoids unnecessary time zone conversions. Data that also needs a time requires more than date alone and a separate time zone policy.
Control the width with CSS rather than a size attribute. Provide a label and range explanation, and validate actual dates, leap years, ranges, and business availability on the server for unsupported controls or requests that bypass browser checks. Selecting a date does not book a place or check current booking availability on the server. The MDN date input reference explains the attribute rules.
