<label for="meeting-time">Choose a time for your appointment:</label><input  type="datetime-local"   name="meeting-time"  value="2018-06-12T19:30"  min="2018-06-07T00:00"  max="2018-06-14T00:00" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

The control's UI varies in general from browser to browser. The control is intended to representa local date and time, not necessarilythe user's local date and time. In other words, the input allows any valid combination of year, month, day, hour, and minute—even if such a combination is invalid in the user's local time zone (such as the one hour within a daylight saving time spring-forward transition gap).

A string representing the value of the date entered into the input. The format of the date and time value used by this input type is described inLocal date and time strings.

You can set a default value for the input by including a date and time inside thevalue attribute, like so:

<label for="party">Enter a date and time for your party booking:</label><input   type="datetime-local"  name="party-date"  value="2017-06-01T08:30" />

One thing to note is that the displayed date and time formats differ from the actualvalue; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/timevalue is always formattedYYYY-MM-DDTHH:mm. When the above value is submitted to the server, for example, it will look likeparty-date=2024-06-01T08:30.

You can also get and set the date value in JavaScript using theHTMLInputElementvalue property, for example:

const dateControl = document.querySelector('input[type="datetime-local"]');dateControl.value = "2017-06-01T08:30";

In addition to the attributes common to all<input> elements,datetime-local inputs offer the following attributes.

The latest date and time to accept. If thevalue entered into the element is later than this timestamp, the element failsconstraint validation. If the value of themax attribute isn't a valid string that follows the formatYYYY-MM-DDTHH:mm, then the element has no maximum value.

This value must specify a date string later than or equal to the one specified by themin attribute.

The earliest date and time to accept; timestamps earlier than this will cause the element to failconstraint validation. If the value of themin attribute isn't a valid string that follows the formatYYYY-MM-DDTHH:mm, then the element has no minimum value.

This value must specify a date string earlier than or equal to the one specified by themax attribute.

Thestep attribute is a number that specifies the granularity that the value must adhere to, or the special valueany, which is described below. Only values which are equal to the basis for stepping (min if specified,value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value ofany means that no stepping is implied, and any value is allowed (barring other constraints, such asmin andmax).

Fordatetime-local inputs, the value ofstep is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value ofstep is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

At this time, it's unclear what a value ofany means forstep when used withdatetime-local inputs. This will be updated as soon as that information is determined.

Date/time inputs are convenient for the developer; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, it is important to consider your users. Don't require your users to enter data that is not needed for your app to function.

<input type="datetime-local"> doesn't support form control sizing attributes such assize. You'll have to resort toCSS for customizing the sizes of these elements.

One thing thedatetime-local input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in thedatetime input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.

For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in ahidden input type. For example:

<input type="hidden" name="timezone" value="-08:00" />

On the other hand, if you were required to allow the user to enter a time zone along with a date/time input, you could have a<select> element to enable the user to set the right time zone by choosing a particular location from among a set of locations:

<select name="timezone">  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>  <option value="Pacific/Midway">Midway Island, Samoa</option>  <option value="Pacific/Honolulu">Hawaii</option>  <option value="Pacific/Marquesas">Taiohae</option>  <!-- and so on --></select>

In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.

By default,<input type="datetime-local"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g., the 32nd of April).

You can usemin andmax to restrict the available dates (seeSetting maximum and minimum dates), and you can use therequired attribute to make filling in the date/time mandatory. As a result, browsers will display an error if you try to submit a date that is outside the set bounds or an empty date field.

Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:

<form>  <div>    <label for="party">      Choose your preferred party date and time (required, June 1st 8.30am to      June 30th 4.30pm):    </label>    <input           type="datetime-local"      name="party-date"      min="2017-06-01T08:30"      max="2017-06-30T16:30"      required />    <span></span>  </div>  <div>    <input type="submit" value="Book party!" />  </div></form>

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here's the CSS used in the above example. Here we make use of the:valid and:invalid CSS properties to style the input based on whether the current value is valid. We put the icons on a<span> next to the input.

div {  margin-bottom: 10px;  display: flex;  align-items: center;}label {  display: inline-block;  width: 300px;}input:invalid + span::after {  content: "✖";  padding-left: 5px;}input:valid + span::after {  content: "✓";  padding-left: 5px;}

The most basic use of<input type="datetime-local"> involves a basic<input> and<label> element combination, as seen below:

<form>  <label for="party">Enter a date and time for your party booking:</label>  <input type="datetime-local" name="party-date" /></form>

You can use themin andmax attributes to restrict the dates/times that can be chosen by the user. In the following example, we are setting a minimum datetime of2025-06-01T08:30 and a maximum datetime of2025-06-30T16:30:

<form>  <label for="party">Enter a date and time for your party booking:</label>  <input       type="datetime-local"    name="party-date"    min="2025-06-01T08:30"    max="2025-06-30T16:30" /></form>

Only days in June 2025 can be selected. Depending on what browser you are using, times outside the specified values might not be selectable. In other browsers, invalid dates and times are selectable but will match:invalid and:out-of-range and will failvalidation.

In some browsers (Chrome and Edge), only the "days" part of the date value will be editable, and dates outside June can't be scrolled. In others (Safari), the date picker will appear to allow any date, but the value will be clamped to the valid range when a date is selected.

The valid range included all times between themin andmax values; the time of day is only constrained on the first and last dates in the range.

• The generic<input> element and the interface used to manipulate it,HTMLInputElement
• <input type="date"> and<input type="time">
• Date and time formats used in HTML
• Date and Time picker tutorial