path: root/devdocs/html/element%2Finput%2Fdatetime-local.html

<header><h1>&lt;input type="datetime-local"&gt;</h1></header><div class="section-content"><p><a href="../input"><code>&lt;input&gt;</code></a> elements of type <code>datetime-local</code> create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-datetime-local.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The control's UI varies in general from browser to browser. In browsers with no support, these degrade gracefully to simple <a href="text"><code>&lt;input type="text"&gt;</code></a> controls.</p> <p>The control is intended to represent <em>a local date and time</em>, not necessarily <em>the user's local date and time</em>. 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).</p>
</div>
<h2 id="value">Value</h2>
<div class="section-content">
<p>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 in <a href="../../date_and_time_formats#local_date_and_time_strings">Local date and time strings</a>.</p> <p>You can set a default value for the input by including a date and time inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="kwZ/uT1FjSSLcKvvuJpJxgun07zIin9Z9Yr5P+dBY48=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>
  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span>
  <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span>
  <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-06-01T08:30<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect1">

<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=value" loading="lazy"></iframe>
</div> <p>One thing to note is that the displayed date and time formats differ from the actual <code>value</code>; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time <code>value</code> is always formatted <code>YYYY-MM-DDThh:mm</code>. When the above value is submitted to the server, for example, it will look like <code>partydate=2024-06-01T08:30</code>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Also bear in mind that if such data is submitted via HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a>, the colon character will need to be escaped for inclusion in the URL parameters, e.g. <code>partydate=2024-06-01T08%3A30</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a> for one way to do this.</p> </div> <p>You can also get and set the date value in JavaScript using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property, for example:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="nlVjs+FdRTmymC4zaX6jlC3lsvwYXtcryOjj1GE5yZI=" data-language="js"><span class="token keyword">const</span> dateControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="datetime-local"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dateControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2017-06-01T08:30"</span><span class="token punctuation">;</span>
</pre>
</div>
</div>
<h2 id="additional_attributes">Additional attributes</h2>
<div class="section-content"><p>In addition to the attributes common to all <a href="../input"><code>&lt;input&gt;</code></a> elements, <code>datetime-local</code> inputs offer the following attributes.</p></div>
<h3 id="max">max</h3>
<div class="section-content">
<p>The latest date and time to accept. If the <a href="../input#value"><code>value</code></a> entered into the element is later than this timestamp, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid string that follows the format <code>YYYY-MM-DDThh:mm</code>, then the element has no maximum value.</p> <p>This value must specify a date string later than or equal to the one specified by the <code>min</code> attribute.</p>
</div>
<h3 id="min">min</h3>
<div class="section-content">
<p>The earliest date and time to accept; timestamps earlier than this will cause the element to fail <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a valid string that follows the format <code>YYYY-MM-DDThh:mm</code>, then the element has no minimum value.</p> <p>This value must specify a date string earlier than or equal to the one specified by the <code>max</code> attribute.</p>
</div>
<h3 id="step">step</h3>
<div class="section-content">
<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>For <code>datetime-local</code> inputs, the value of <code>step</code> is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).</p> <p><em>At this time, it's unclear what a value of <code>any</code> means for <code>step</code> when used with <code>datetime-local</code> inputs. This will be updated as soon as that information is determined.</em></p>
</div>
<h2 id="using_datetime-local_inputs">Using datetime-local inputs</h2>
<div class="section-content"><p>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.</p></div>
<h3 id="controlling_input_size">Controlling input size</h3>
<div class="section-content"><p><code>&lt;input type="datetime-local"&gt;</code> doesn't support form control sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for customizing the sizes of these elements.</p></div>
<h3 id="setting_timezones">Setting timezones</h3>
<div class="section-content">
<p>One thing the <code>datetime-local</code> 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 the <code>datetime</code> 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.</p> <p>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 a <a href="hidden"><code>hidden</code></a> input type. For example:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="ef9KIX+FOM+T+G9HJMBPyM5dyf/HomTirSF24wLA2sA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-08:00<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>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 <a href="../select"><code>&lt;select&gt;</code></a> element to enable the user to set the right time zone by choosing a particular location from among a set of locations:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="F94VbTaqRpjqkyn9IbEcl2SXN5T/B76nyEZR9WGH2/8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pacific/Kwajalein<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Eniwetok, Kwajalein<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pacific/Midway<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Midway Island, Samoa<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pacific/Honolulu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Hawaii<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pacific/Marquesas<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Taiohae<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- and so on --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <p>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.</p>
</div>
<h2 id="validation">Validation</h2>
<div class="section-content">
<p>By default, <code>&lt;input type="datetime-local"&gt;</code> 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).</p> <p>You can use <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> to restrict the available dates (see <a href="#setting_maximum_and_minimum_dates">Setting maximum and minimum dates</a>), and you can use the <a href="../input#required"><code>required</code></a> attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds or an empty date field.</p> <p>Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="corPgpDZ5O2oxNe8+g0Zn5OwnZ4GW3x8jetxP5ThLB4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>
      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span>
      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span>
      <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span>
      <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-06-01T08:30<span class="token punctuation">"</span></span>
      <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-06-30T16:30<span class="token punctuation">"</span></span>
      <span class="token attr-name">required</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validity<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Book party!<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <p>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:</p>
<div class="code-example" id="sect4">

<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=validation" loading="lazy"></iframe>
</div> <p>Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We put the icons on a <a href="../span"><code>&lt;span&gt;</code></a> next to the input.</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="2eZkvfBs8/bDWnklRDJmX3FAUPNJelJw8hEyRehs7dc=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">label</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <div class="notecard warning" id="sect5"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, problems can arise when improperly-formatted data is submitted (or data that is too large, is of the wrong type, and so forth).</p> </div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> With a <code>datetime-local</code> input, the date value is always normalized to the format <code>YYYY-MM-DDThh:mm</code>.</p> </div>
</div>
<h2 id="examples">Examples</h2>

<h3 id="basic_uses_of_datetime-local">Basic uses of datetime-local</h3>
<div class="section-content">
<p>The simplest use of <code>&lt;input type="datetime-local"&gt;</code> involves a basic <code>&lt;input&gt;</code> and <a href="../label"><code>&lt;label&gt;</code></a> element combination, as seen below:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="DZvxt+CVOfipn69TBi+o0Bo8zHJtHGwmd7r1bFnQInk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect7">

<iframe class="sample-code-frame" title="Basic uses of datetime-local sample" id="frame_basic_uses_of_datetime-local" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=basic_uses_of_datetime-local" loading="lazy"></iframe>
</div>
</div>
<h3 id="setting_maximum_and_minimum_dates_and_times">Setting maximum and minimum dates and times</h3>
<div class="section-content">
<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the dates/times that can be chosen by the user. In the following example, we are setting a minimum datetime of <code>2024-06-01T08:30</code> and a maximum datetime of <code>2024-06-30T16:30</code>:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="QOF6UCB7v76GsCDKdT+yy/bB7vHnqmooQC4q3vpCROk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>
    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span>
    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span>
    <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-06-01T08:30<span class="token punctuation">"</span></span>
    <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-06-30T16:30<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect8">

<iframe class="sample-code-frame" title="Setting maximum and minimum dates and times sample" id="frame_setting_maximum_and_minimum_dates_and_times" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=setting_maximum_and_minimum_dates_and_times" loading="lazy"></iframe>
</div> <p>Only days in June 2024 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> and will fail <a href="#validation">validation</a>.</p> <p>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.</p> <p>The valid range included all times between the <code>min</code> and <code>max</code> values; the time of day is only constrained on the first and last dates in the range.</p> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> You should be able to use the <a href="../input#step"><code>step</code></a> attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.</p> </div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td> A string representing a date and time (in the local time zone), or empty. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td>
<code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local)">HTML Standard <br><small># local-date-and-time-state-(type=datetime-local)</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>datetime-local</code></th>
<td class="bc-supports-yes">20</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">93</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">14.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-yes">93</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.5</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>The generic <a href="../input"><code>&lt;input&gt;</code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>
</li> <li>
<a href="date"><code>&lt;input type="date"&gt;</code></a> and <a href="time"><code>&lt;input type="time"&gt;</code></a>
</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker">Date and Time picker tutorial</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local</a>
  </p>
</div>