path: root/files/uk/web/html/element/input/date/index.html

---
title: <input type="date">
slug: Web/HTML/Element/input/date
translation_of: Web/HTML/Element/input/date
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">{{HTMLElement("input")}} елементи типу <strong><code>date</code></strong> створюють поле вводу дати з вбудованим інтерфейсом вибору.</span> Результатом вибору будуть рік, місяць та день, без часу. <code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code> та <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> поля підтримують вибір часу та дати і часу.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>

<p class="hidden">Ісходний код цих прикладів зберігається на GitHub. Якщо ви хотілиби присвятити час розвитку данних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і відправте нам pull-запит.</p>

<p>UI віджет змінюється від оглядача к оглядачу; для перегляду сумісності дивіться {{anch("Browser compatibility")}}. Якщо оглядач не підтримує такий віджет, він буде відображений просто як <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;.</a></code></p>

<p>Серед оглядачів які підтримуюсь кастомний інтерфейс вибору дати є Chrome/Opera, який виглядає наступним чином:</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>Edge вибор дати виглядає так:</p>

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

<p>У Firefox вибір дати буде таким:</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>{{domxref("DOMString")}} представляє дату у YYYY-MM-DD форматі, або пустим</td>
  </tr>
  <tr>
   <td><strong>Події</strong></td>
   <td>{{event("change")}} та {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Підримка атрибутів</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, та {{htmlattrxref("step", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL атрибути</strong></td>
   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
  </tr>
  <tr>
   <td><strong>Методи</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Значення">Значення</h2>

<p>{{domxref("DOMString")}} представляє значення дати введенної у input. Формат дати описаний у {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}.</p>

<p>Ви можете встановити значення за замовчуванням встановивши дату в атрибут {{htmlattrxref("value", "input")}} , наприклад:</p>

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

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

<p>Треба пам'ятати що відображений формат відрізняється від актуального <code>value</code> — відображення формату дати буде вибрано на основі вибраної локалі користувальницького оглядача, тоді як <code>value</code> дати завжди є у форматі <code>yyyy-mm-dd</code>.</p>

<p>Ви також можете взяти чи встановити значення дати у JavaScript використовуючи властивість елементу {{domxref("HTMLInputElement.value", "value")}} , наприклад:</p>

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

<p>Цей код знаходить перший {{HTMLElement("input")}} елемент <code>type</code> якого є <code>date</code> і встановлює його значення 2017-06-01 (June 1, 2017).</p>

<h2 id="Додаткові_атрибути">Додаткові атрибути</h2>

<p>Додатково з загальними атрибутами {{HTMLElement("input")}} <code>"date"</code> надає наступні додаткові атрибути:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Атрибут</th>
   <th scope="col">Опис</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("max")}}</code></td>
   <td>Максимальна дата яка може бути введена</td>
  </tr>
  <tr>
   <td><code>{{anch("min")}}</code></td>
   <td>Мінімальна дата</td>
  </tr>
  <tr>
   <td><code>{{anch("readonly")}}</code></td>
   <td>Чи є у інпута контент чи нема, він лише для считування</td>
  </tr>
  <tr>
   <td><code>{{anch("step")}}</code></td>
   <td>Інтервал </td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>

<p>Остання дата. Якщо встановлена дата {{htmlattrxref("value", "input")}} більше ніж ця дата, елемент не пройде <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>max</code> не валідна строка формату <code>yyyy-MM-dd</code>, тоді елемент не буде мати максимальне обмеження.</p>

<p>Це значення має вказувати дату пізнішу або поточну вказанному атрибуту <code>min</code>.</p>

<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>

<p>Мінімальна дата; дати раніші за вказану не пройдуть <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення  <code>min</code> атрибуту має неавлідний формат <code>yyyy-MM-dd</code>, тоді елемент не матиме мінімального обмеження.</p>

<p>Це значення вказує меньшу або еквівалентну значенню атрибута <code>max</code>.</p>

<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>

<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>

<p>Для <code>date</code> інпутів, значення <code>step</code> вказується в днях, скалярні до 86,400,000 (мілісекунди). За замовчуванная <code>step</code> має 1, означаюче 1 день.</p>

<div class="blockIndicator note">
<p>Вказання <code>any</code> для <code>step</code> атрибуту робить той самий ефект як і <code>1</code>.</p>
</div>

<h2 id="Використання_date_інпутів">Використання date інпутів</h2>

<p>Поле введення дати зручні на перший погляд — вони надають легкий UI(користувальницький інтерфейс) для вибору дати, і нормалізують формат даних для відправки на сервер, незважаючи на локаль користувача. Однак, існують проблеми підтримки деякими оглядачами <code>&lt;input type="date"&gt;</code>.</p>

<p>Подивимось на базові та комлексні використання <code>&lt;input type="date"&gt;</code>, щодо сумісності оглядачів ви можете порадитись за посиланням (see {{anch("Handling browser support")}}). Звичайно, з часом підтримка в оглядачах розповсюдиться. і усі проблеми будуть вирішені.</p>

<h3 id="Базові_використання_date">Базові використання date</h3>

<p>Найпростіше використання <code>&lt;input type="date"&gt;</code> передбачає базову <code>&lt;input&gt;</code> і {{htmlelement("label")}} комбінацію елементів, як бачимо нижче:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
    &lt;input type="date" id="bday" name="bday"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

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

<h3 id="Встановлення_мінімальной_і_максимальної_дати">Встановлення мінімальной і максимальної дати</h3>

<p>Ви можете використовувати {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} атрибути щоб обмежити дати які будуть вибрані користувачем. В наступному прикладі ми встановлюємо мінімальну дату <code>2017-04-01</code> і максимальну дату <code>2017-04-30</code>:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="party"&gt;Choose your preferred party date:&lt;/label&gt;
    &lt;input type="date" id="party" name="party" 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>Результатом будуть лише дні в Квітні 2017го які можно буде вибрати — тільки "дні", частина текстового значення будуть можливі для зміни, дати поза Квітнем не будуть проскролюватись у віджеті.</p>

<div class="note">
<p><strong>Примітка</strong>: Ви можете використати {{htmlattrxref("step", "input")}} атрибут для того щоб вказати інтервал зміни днів (наприклад ви хотіли б щоб можно були вибрати лише Неділю). Однак, це не завжди ефективно в тих чи іншіх реалізаціях.</p>
</div>

<h3 id="Контроль_розміру_input">Контроль розміру input</h3>

<p><code>&lt;input type="date"&gt;</code> не підтримує розмір форми атрибутами наприклад {{htmlattrxref("size", "input")}}. Зверніться до <a href="/en-US/docs/Web/CSS">CSS</a> для контролю розміру елементу.</p>

<h2 id="Валідація">Валідація</h2>

<p>За замовчуванням, <code>&lt;input type="date"&gt;</code> не додає жодної валідації на введення значення. UI реалізація загалом не дозволяє уведення будь чого що не є датою — що є добре — але ви всеодно можете лишати поле пустим чи (в оглядачах де інпут відображається простим типом <code>text</code>) ввести неправильну дату (наприклад 32ге Квітня).</p>

<p>Якщо ви використовуєте {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} для обмеження введення дат (дивіться {{anch("Setting maximum and minimum dates")}}), підтримуючі оглядачі відобразять помилку якщо ви спробуєте відправити дату поза меж вказаних в атрибутах. Однак, перевірте результат щоб запевнитись що значення всередені цих дат, тому що вони можуть не підтримуватись пристрієм користувача.</p>

<p>В додаток, ви можете використовувати {{htmlattrxref("required", "input")}} атрибут щоб зробити заповнення дати обьв'язковим — знову ж, буде відображена помилка якщо користувач захоче відправити пусте поле. Принаймні, це буде працювати у більшості оглядачів.</p>

<p>Давайте розглянемо приклад — ми встановили мінімальну і максимальну дату, і також зробили його обов'язковим:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="party"&gt;Choose your preferred party date (required, April 1st to 20th):&lt;/label&gt;
    &lt;input type="date" id="party" name="party" 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>Якщо ви спробуєте відправити форму з незаповненою датою(або з датою поза межами), оглядач відобразить помилку. Спробуйте це самі зробити для перевірки:</p>

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

<p>Це скріншот приклади оглядача без підтримки віджету дати:</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>CSS використаний нижче в прикладі. Ми використовуєм правила {{cssxref(":valid")}} та {{cssxref(":invalid")}} CSS щоб стилізувати відображення валідного чи невалідного введенного значення поля. Ми встановлюємо іконку на {{htmlelement("span")}} біля інпуту, не на самий інпут, тому що у Chrome створений контент розміщений всередені контролю форми, і не може бути застилізований чи відображений коректно.</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>Важливо</strong>: HTML валідація форми не замінює скрипти які перевіряють чи буле введена інформація у коректному форматі. Це достатньо простий метод щоб додати корекцію до HTML, їх можливо обійти , чи видалити зовсім. Якщо ваша серверна сторона не перевірить відправлені данні, це може бути катастрофа (данні можуть бути дуже великого розміру, або неправильного типу, вам можуть завантажити скрипт взлому і так далі).</p>
</div>

<h2 id="Обробка_підтримки_оглядачів">Обробка підтримки оглядачів</h2>

<p>Як згадано раніше, більша частина проблем з використанням інпуту дати описани  у {{anch("Browser compatibility", "browser support")}}. Як приклад, дата пікер у Firefox для Android виглядає так:</p>

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

<p>Непідтримуючи оглядачі точно деградують інпут, це створює проблеми у якості інтерфейсу користувача (представлеий віджет буде іншим), і обробкою даних.</p>

<p>Наступна проблема це більш серьозна; як згадували раніше, за інпутом дати, данні завжди нормалізуються у формат <code>yyyy-mm-dd</code>. З текстовим інпутом оглядач не підтримує формат введених даних, і є багато прикладів як люди вводять дати, наприклад:</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>Єдиний спосіб стосовно цього є лише введення атрибуту {{htmlattrxref("pattern", "input")}}. Якщо інпут дати не використовує цей атрибут, то текстовий буде. Наприклад, розгляньте код у непідтримуючих оглядачах:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
    &lt;input type="date" id="bday" name="bday" 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>Якщо ви спробуєте відправити це, ви побачете помилку (інпут підсвітеться як невалідний) якщо ви ввели данні які не збігаються з шаблоном <code>nnnn-nn-nn</code>, де <code>n</code> номер від 0 до 9. Звичайно, це не зупинить людей від введення неправильної дати, чи введення у неправильному форматі, як <code>yyyy-dd-mm</code> (де ми очикуємо <code>yyyy-mm-dd</code>). Тож всеж таки маємо проблему.</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>Найкращий шлях опрацьовувати дати в формах в крос-браузерному форматі на даний момент є введення користувачем дня, місяця, і року в окремих елементах ({{htmlelement("select")}}; (дивіться далі реалізацію), або використовуючи JavaScript бібліотеку <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>

<h2 id="Приклади">Приклади</h2>

<p>В цьому прикладі ми створюємо два набори UI елементів для вибору дат: рідний <code>&lt;input type="date"&gt;</code> і набір із трьох {{htmlelement("select")}} елементів для вибору дати в тих оглядачах які не підтримують рідний date інпут.</p>

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

<h3 id="HTML">HTML</h3>

<p>HTML виглядає так:</p>

<pre class="brush: html">&lt;form&gt;
    &lt;div class="nativeDatePicker"&gt;
      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
      &lt;input type="date" id="bday" name="bday"&gt;
      &lt;span class="validity"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
    &lt;div class="fallbackDatePicker"&gt;
      &lt;span&gt;
        &lt;label for="day"&gt;Day:&lt;/label&gt;
        &lt;select id="day" name="day"&gt;
        &lt;/select&gt;
      &lt;/span&gt;
      &lt;span&gt;
        &lt;label for="month"&gt;Month:&lt;/label&gt;
        &lt;select id="month" name="month"&gt;
          &lt;option selected&gt;January&lt;/option&gt;
          &lt;option&gt;February&lt;/option&gt;
          &lt;option&gt;March&lt;/option&gt;
          &lt;option&gt;April&lt;/option&gt;
          &lt;option&gt;May&lt;/option&gt;
          &lt;option&gt;June&lt;/option&gt;
          &lt;option&gt;July&lt;/option&gt;
          &lt;option&gt;August&lt;/option&gt;
          &lt;option&gt;September&lt;/option&gt;
          &lt;option&gt;October&lt;/option&gt;
          &lt;option&gt;November&lt;/option&gt;
          &lt;option&gt;December&lt;/option&gt;
        &lt;/select&gt;
      &lt;/span&gt;
      &lt;span&gt;
        &lt;label for="year"&gt;Year:&lt;/label&gt;
        &lt;select id="year" name="year"&gt;
        &lt;/select&gt;
      &lt;/span&gt;
    &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Назви місяців жорстко закодовані (тому що вони завжди однакові), коли дні і роки динамічно згенеровані залежно від того який місяць і рік вибраний, і поточний рік (дивіться коментарі коду нижче для детального пояснення як ці функції працюють).</p>

<div class="hidden">
<pre class="brush: css">input:invalid+span:after {
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  content: '✓';
  padding-left: 5px;
}</pre>
</div>

<h3 id="JavaScript">JavaScript</h3>

<p>Друга частина коду розраховує чи підтримує оглядач <code>&lt;input type="date"&gt;</code>, ми створюєм {{htmlelement("input")}} елемент, із <code>type</code> <code>date</code>, потім одразу перевіряємо який тип було встановлено — непідтримуючі оглядачі автоматично повернуть тип <code>text</code>, тому що <code>date</code> тип автоматично перетворюється на <code>text</code>. Якщо <code>&lt;input type="date"&gt;</code> не підтримується, ми приховуємо рідний інпут і показуєм UI ({{htmlelement("select")}}) замість нього.</p>

<pre class="brush: js">// define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
var daySelect = document.querySelector('#day');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'date';

// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the days and years dynamically
  // (the months are always the same, therefore hardcoded)
  populateDays(monthSelect.value);
  populateYears();
}

function populateDays(month) {
  // delete the current set of &lt;option&gt; elements out of the
  // day &lt;select&gt;, ready for the next set to be injected
  while(daySelect.firstChild){
    daySelect.removeChild(daySelect.firstChild);
  }

  // Create variable to hold new number of days to inject
  var dayNum;

  // 31 or 30 days?
  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
    dayNum = 31;
  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
    dayNum = 30;
  } else {
  // If month is February, calculate whether it is a leap year or not
    var year = yearSelect.value;
    var isLeap = new Date(year, 1, 29).getMonth() == 1;
    isLeap ? dayNum = 29 : dayNum = 28;
  }

  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
  for(i = 1; i &lt;= dayNum; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    daySelect.appendChild(option);
  }

  // if previous day has already been set, set daySelect's value
  // to that day, to avoid the day jumping back to 1 when you
  // change the year
  if(previousDay) {
    daySelect.value = previousDay;

    // If the previous day was set to a high number, say 31, and then
    // you chose a month with less total days in it (e.g. February),
    // this part of the code ensures that the highest day available
    // is selected, rather than showing a blank daySelect
    if(daySelect.value === "") {
      daySelect.value = previousDay - 1;
    }

    if(daySelect.value === "") {
      daySelect.value = previousDay - 2;
    }

    if(daySelect.value === "") {
      daySelect.value = previousDay - 3;
    }
  }
}

function populateYears() {
  // get this year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year &lt;select&gt;
  for(var i = 0; i &lt;= 100; i++) {
    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);
  }
}

// when the month or year &lt;select&gt; values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = function() {
  populateDays(monthSelect.value);
}

monthSelect.onchange = function() {
  populateDays(monthSelect.value);
}

//preserve day selection
var previousDay;

// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function() {
  previousDay = daySelect.value;
}</pre>

<div class="note">
<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p>
</div>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2>



<p>{{Compat("html.elements.input.input-date")}}</p>

<h2 id="Дивіться_також">Дивіться також</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="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li>
</ul>