<input type="date">

Елементи <input> з атрибутом type="date" ("тип=дата") створюють поля введення, що дають користувачеві можливість ввести дату. Зовнішній вигляд інтерфейсу вибору дати буває різним залежно від браузера та операційної системи. Значення нормалізується до формату yyyy-mm-dd.

Значення результату включає рік, місяць та день, але не час. Типи поля введення time підтримує введення часу, а datetime-local – дати разом з часом.

Спробуйте його в дії

Значення

Рядок, що представляє дату, введену в поле. Форматується згідно з форматом рядків дат.

Можна встановити усталене значення поля введення з датою всередині атрибута value, ось так:

<input type="date" value="2017-06-01" />

[!NOTE] Показаний формат дати відрізнятиметься від реального value: показана дата форматується на основі локалі браузера користувача, однак розібране value завжди форматується відповідно до yyyy-mm-dd.

Можна отримати та встановити значення дати за допомогою JavaScript, використовуючи властивості HTMLInputElement value та valueAsNumber. Наприклад:

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // виводить "2017-06-01"
console.log(dateControl.valueAsNumber); // виводить 1496275200000, мітку часу JavaScript (у мілісекундах)

Цей код знаходить перший елемент <input>, чий атрибут type має значення date, і встановлює його значенням 2017-06-01 (1 червня 2017 року). Потім він зчитує це значення назад у вигляді рядка та числа.

Додаткові атрибути

Атрибути, що є спільними для всіх елементів <input>, застосовуються і до полів date, але можуть не впливати на їх подання. Наприклад, size та placeholder можуть не працювати. Поля date мають наступні додаткові атрибути.

max

Найпізніша прийнятна дата. Якщо value, введене в елемент, пізніше, то елемент провалює валідацію обмежень. Якщо значення атрибута max не є можливим рядком дати у форматі yyyy-mm-dd, то елемент не має максимального значення дати.

Якщо встановлені й max, і min, то значення max мусить бути рядком дати, що є пізнішою чи рівною тій, що в атрибуті min.

min

Найраніша прийнятна дата. Якщо value, введене в елемент, раніше, то елемент провалює валідацію обмежень. Якщо значення атрибута min не є можливим рядком дати у форматі yyyy-mm-dd, то елемент не має мінімального значення дати.

Якщо встановлені й max, і min, то значення min мусить бути рядком дати, що є ранішою чи рівною тій, що в атрибуті max.

step

Атрибут step (крок) – число, що вказує відстань між поділками, до котрих має приставати значення, або особливе значення any, описане нижче. Лише значення, рівні базі крокування (min, якщо вказаний, інакше – value, або ж відповідне усталене значення, якщо і цього немає), є дійсними.

Рядкове значення any означає, що крокування не застосовується, тож дозволено будь-яке значення (враховуючи інші обмеження, наприклад, min і max).

[!NOTE] Коли дані, введені користувачем, не відповідають налаштуванням крокування, користувацький агент може заокруглити до найближчого дійсного значення, віддаючи перевагу числам у напрямку збільшення, коли є два рівновіддалені варіанти.

Для полів date значення step задається в днях, а працює – як число мілісекунд, рівне 86.400.000 разів по значення step (воно зберігається й працює в мілісекундах). Усталене значення step – 1, тобто 1 день.

[!NOTE] Якщо вказати any як значення step, то для полів date це матиме такий само ефект, як 1.

Використання полів дати

Поля введення дати надають зручний інтерфейс вибору дат, а також нормалізують формат дати перед надсиланням на сервер, незалежно від локалі користувача.

В цьому розділі розглядатиметься просте та складніше використання <input type="date">.

Базове використання полів дати

Найпростіше використання <input type="date"> залучає один <input> разом із його <label>, дивіться нижче:

<form action="https://example.com">
  <label>
    Введіть свій день народження:
    <input type="date" name="bday" />
  </label>

  <p><button>Надіслати</button></p>
</form>

Цей HTML надсилає введену дату за ключем bday на https://example.com — в результаті URL стане виду https://example.com/?bday=1955-06-08.

Встановлення максимальної та мінімальної дат

Можна використовувати атрибути min і max, щоб обмежити дати, що можуть бути обрані користувачем. В наступному прикладі встановлена мінімальна дата 2017-04-01 та максимальна 2017-04-30:

<form>
  <label
    >Оберіть бажану дату вечірки:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Наслідком є те, що можна обрати дні лише у квітні 2017 року: місяць та рік в текстовому полі не редагуються, і дати поза квітнем 2017 не можуть бути обрані у віджеті вибору.

Можна скористатися атрибутом step, щоб варіювати число днів, на котрі відбувається стрибок при інкременті (наприклад, щоб можна було вибрати лише суботи).

Контроль розміру поля введення

<input type="date"> не підтримує атрибути розміру форми, наприклад, size. Віддавайте перевагу CSS для задання їм розмірів.

Валідація

Усталено <input type="date"> не перевіряє дійсність введеного значення, окрім його формату. Інтерфейси в загальному не дають ввести будь-що, що не є датою – що корисно.

Маючи обмеження доступних дат min і max (дивіться Встановлення максимальної та мінімальної дат), контрольний елемент деактивує під час вибору неприйнятні дати й покаже помилку, якщо спробувати надіслати дату поза заданим діапазоном.

Також можна використати атрибут required, щоб зробити введення дати обов'язковим: буде показана помилка, якщо спробувати подати пусте поле дати.

Погляньмо на приклад мінімальної та максимальної дат, де поле також є обов'язковим:

<form>
  <label>
    Оберіть бажану дату вечірки (обов'язково, між 1 та 20 квітня):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Надіслати</button>
  </p>
</form>

При спробі подати форму з неповною датою (чи датою поза встановленими межами) браузер покаже помилку. Спробуйте пограти з прикладом нижче:

Нижче – CSS, використаний у прикладі вище. Використовуються псевдоелементи :valid та :invalid, щоб додати іконку після поля, відповідну дійсності чи недійсності поточного значення. Доводиться встановлювати іконку на <span> після поля, а не саме поле, бо принаймні в Chrome згенерований вміст поля показується всередині контрольного елемента, його не можна ефективно оформити чи щось додати.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

[!WARNING] Валідація на боці клієнта не усуває потреби виконувати валідацію на сервері. Будь-кому легко змінити HTML – чи обійти HTML взагалі, надсилаючи дані напряму на ваш сервер. Якщо ваш сервер не зможе валідувати отримані дані, може статися лихо: дані можуть бути невідформатованими, занадто великими, не того типу тощо.

Приклади

У цьому прикладі за допомогою нативного елемента <input type="date"> створюється інтерфейс вибору дати.

HTML

HTML має такий вигляд:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Введіть дату свого народження:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS

CSS має такий вигляд:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

Результати

Технічний підсумок

Специфікації

Сумісність із браузерами

Додаткова інформація

• Загальний елемент <input> та інтерфейс для керування ним, HTMLInputElement
• Настанови з віджетів вибору дати й часу
• Вживані в HTML формати дати й часу
• Сумісність властивостей CSS