Skip to main content

HTML input type="datetime-local"

HTML's input elements of type datetime-local provide an easy way for users to enter both the date and time in one control. The entered date includes the year, month, and day while the time includes the hour and minute. All of this information is required and must be entered in a specific format.

When used, it provides a user interface for selecting a date and time in the user's local timezone.

<label for="datetime">Select a date and time:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="datetime">Select a date and time:</label>
<input type="datetime-local" id="datetime" name="datetime" value="2023-04-01T12:00">
<label for="datetime">Select a date and time between April 1st and April 30th:</label>
<input type="datetime-local" id="datetime" name="datetime" min="2023-04-01T00:00" max="2023-04-30T23:59">

It is important to note that the date and time displayed to the user may be different from the actual value stored. This is because the displayed date and time are formatted according to the user's locale settings, as reported by the operating system. The actual date and time value, however, is always formatted in the YYYY-MM-DDThh:mm format. For example, when the value 2017-06-01T08:30 is submitted to the server, it will appear in this format.