path: root/files/pt-br/web/html/element/input/data/index.html

---
title: <input type="date">
slug: Web/HTML/Element/Input/data
tags:
  - Date picker
  - Elemento
  - Elemento de entrada
  - HTML
  - Input
  - NeedsCompatTable
  - Referencia
  - Selecionador de data
  - Tipo de Input
  - data
translation_of: Web/HTML/Element/input/date
---
<p>Os elementos {{htmlelement("input")}} do tipo <strong><code>date</code></strong> cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o <code>horário</code>. Os tipos de entrada <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time">time</a> e <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> permitem informar horário e data/hora.</p>

<p>A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um  <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> simples.</p>

<pre class="brush: html">&lt;input id="date" type="date"&gt;</pre>

<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p>

<p>Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>

<p>O controle de data do Edge se parece assim:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>

<p>O controle de data do Firefox se parece assim:</p>

<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{event("change")}} e {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos Comuns Suportados</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos IDL</strong></td>
   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Valores">Valores</h2>

<p>Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:</p>

<pre class="brush: html">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>

<p>{{ EmbedLiveSample('Value', 600, 40) }}</p>

<p>Uma coisa para perceber é que o formato da data mostrada difere do <code>value</code> atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em <code>value</code> sempre será formatado como <code>yyyy-mm-dd</code>.</p>

<p>Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:</p>

<pre class="brush: js ">var dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';</pre>

<p>Este código localiza o primeiro elemento {{HTMLElement("input")}} que o <code>type</code> é <code>date</code> e define seu valor para a data 2017-06-01 (1 de junho de 2017).</p>

<h2 id="Atributos_adicionais">Atributos adicionais</h2>

<p>Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:</p>

<table class="standard-table" dir="ltr">
 <thead>
  <tr>
   <th scope="col">Atributo</th>
   <th scope="col">Descrição</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("max")}}</code></td>
   <td>A maior data aceitável</td>
  </tr>
  <tr>
   <td><code>{{anch("min")}}</code></td>
   <td>A menor data aceitável</td>
  </tr>
  <tr>
   <td><code>{{anch("readonly")}}</code></td>
   <td>Se o conteúdo da caixa de texto é somente leitura</td>
  </tr>
  <tr>
   <td><code>{{anch("step")}}</code></td>
   <td>O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação</td>
  </tr>
 </tbody>
</table>

<p> </p>

<h2 id="Usando_caixas_de_texto_de_data">Usando caixas de texto de data</h2>

<p>Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <code>&lt;input type="date"&gt;</code> por causa do suporte limitado do navegador.</p>

<p>Iremos dar uma olhada em usos básicos e mais complexos de <code>&lt;input type="date"&gt;</code>, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.</p>

<h3 id="Uso_básico_da_data">Uso básico da data</h3>

<p>O uso mais simples de <code>&lt;input type="date"&gt;</code> envolve a combinação de um <code>&lt;input&gt;</code> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="diaa"&gt;Informe a data do seu aniversário:&lt;/label&gt;
    &lt;input type="date" id="diaa" name="diaa"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}</p>

<h3 id="Definindo_data_mínima_e_máxima">Definindo data mínima e máxima</h3>

<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como <code>2017-04-01</code> e data máxima como <code>2017-04-30</code>:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="festa"&gt;Escolha a sua data preferida da festa:&lt;/label&gt;
    &lt;input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p>

<p>O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.</p>

<div class="note">
<p><strong>Observação</strong>: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.</p>
</div>

<h3 id="Controlando_o_tamanho_da_entrada">Controlando o tamanho da entrada</h3>

<p><code>&lt;input type="date"&gt;</code> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> para modificar o tamanho.</p>

<h2 id="Validação">Validação</h2>

<p>Por padrão <code>&lt;input type="date"&gt;</code> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo <code>text</code>) informar uma data inválida (ex.: o 32 de Abril).</p>

<p>Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.</p>

<p>Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.</p>

<p>Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="festa"&gt;Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):&lt;/label&gt;
    &lt;input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:</p>

<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p>

<p>Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.</p>

<pre class="brush: css">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;
}</pre>

<div class="warning">
<p><strong>Importante</strong>: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado.  É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente.  Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).</p>
</div>

<h2 id="Manipulação_do_suporte_do_navegador">Manipulação do suporte do navegador</h2>

<p>Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>

<p>Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.</p>

<p>O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato <code>yyyy-mm-dd</code>. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:</p>

<ul>
 <li><code>ddmmyyyy</code></li>
 <li><code>dd/mm/yyyy</code></li>
 <li><code>mm/dd/yyyy</code></li>
 <li><code>dd-mm-yyyy</code></li>
 <li><code>mm-dd-yyyy</code></li>
 <li><code>Month dd yyyy</code></li>
</ul>

<p>Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="diaa"&gt;Informe a data do seu aniversário:&lt;/label&gt;
    &lt;input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>

<p>Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão <code>nnnn-nn-nn</code>, onde <code>n</code> é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como <code>yyyy-dd-mm</code> (onde nós precisamos de <code>yyyy-mm-dd</code>). Então continua sendo um problema.</p>

<div class="hidden">
<pre class="brush: css">div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span:after {
  content: '✖';
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span:after {
  content: '✓';
  position: absolute;
  right: -18px;
}</pre>
</div>

<p>A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o <a href="https://jqueryui.com/datepicker/">selecionador de data do jQuery</a>.</p>

<h2 id="Atributos">Atributos</h2>

<p>Beside the attributes listed below, this element can have any of the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
 <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd>
 <dt>{{htmlattrdef("autofocus")}}</dt>
 <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p>
 </dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code>&lt;input&gt;</code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code>&lt;input&gt;</code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd>
 <dt>{{htmlattrdef("formaction")}}</dt>
 <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
 <dt>{{htmlattrdef("formenctype")}}</dt>
 <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
  <li><code>text/plain</code></li>
 </ul>

 <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
 </dd>
 <dt>{{htmlattrdef("formmethod")}}</dt>
 <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
 <ul>
  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
 </ul>

 <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
 </dd>
 <dt>{{htmlattrdef("formnovalidate")}}</dt>
 <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
 <dt>{{htmlattrdef("formtarget")}}</dt>
 <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
 <ul>
  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("inputmode")}}</dt>
 <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are:
 <ul>
  <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li>
  <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li>
  <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li>
  <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li>
  <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li>
  <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
  <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using &lt;input type="number"&gt;</li>
  <li><code>tel</code>: Telephone input, including asterisk and pound key. Use &lt;input type="tel"&gt; if possible instead.</li>
  <li><code>email</code>: Email input. Use &lt;input type="email"&gt; if possible instead.</li>
  <li><code>url</code>: URL input. Use &lt;input type="url"&gt; if possible instead.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("list")}}</dt>
 <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.</dd>
 <dt>{{htmlattrdef("max")}}</dt>
 <dd>The maximum value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
 <dt>{{htmlattrdef("min")}}</dt>
 <dd>The minimum value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>The name of the control, which is submitted with the form data.</dd>
 <dt>{{htmlattrdef("readonly")}}</dt>
 <dd>This Boolean attribute indicates that the user cannot modify the value of the control.</dd>
 <dt>{{htmlattrdef("required")}}</dt>
 <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
 <dt>{{htmlattrdef("selectionDirection")}}</dt>
 <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd>
 <dt>{{htmlattrdef("spellcheck")}}</dt>
 <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
 <dt>{{htmlattrdef("step")}}</dt>
 <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>The initial value of the control. This attribute is optional.<br>
 Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
 <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
 <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>To create a widget to display a date, use:</p>

<pre class="brush: html">&lt;input type="date"&gt;</pre>

<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>20</td>
   <td>12</td>
   <td>{{CompatGeckoDesktop(57)}}</td>
   <td>{{CompatNo}}</td>
   <td>10.62</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(57)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10.62</td>
   <td>5</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
 <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283381">Bug 1283381 - Firefox bug to implement</a></li>
</ul>