Выбор даты

Date picker — поле формы для одной даты. Дату вводят с клавиатуры или выбирают в календаре; форма получает дату ISO, например 2026-03-17.

Стабильный

Figma

Обзор

Использование

API

Доступность

<tk-field label="Departure date" helper="For example, 27 3 2026">
  <tk-date-picker name="departure" min="2026-03-05" max="2026-09-30"></tk-date-picker>
</tk-field>

Оберните поле в Field, чтобы дать ему подпись, подсказку и ошибку. Без Field задайте aria-label. Внутри Field ставьте required и disabled на сам Field.

Анатомия

Часть	Что это
`tk-date-picker`	сам элемент; две остановки Tab
part `field`	рамка поля; занимает ширину контейнера
part `input`	нативное текстовое поле; в него всегда можно печатать
кнопка календаря	в конце поля; открывает календарь; вторая остановка Tab
part `popover`	панель с Calendar; открывается под полем, а у нижнего края экрана — над ним

Подпись, подсказку и ошибку даёт Field. Календарь одного размера при любом размере поля.

Размеры

<tk-date-picker aria-label="Start date" value="2026-03-17"></tk-date-picker>
<tk-date-picker size="large" aria-label="End date" value="2026-03-24"></tk-date-picker>

`size`	Высота	Отступы по бокам	Текст значения
`medium` (по умолчанию)	32px	`space-8` / `space-4`	Body Small (14/20)
`large`	36px	`space-10` / `space-4`	Body Medium (16/24)

Отступ в конце меньше, чтобы кнопка календаря 24px стояла в поле ровно. Высоты совпадают с Input и Button.

Состояния

<tk-date-picker aria-label="Joined" value="2024-11-02" readonly></tk-date-picker>
<tk-date-picker aria-label="Renewal date" value="2026-11-02" disabled></tk-date-picker>

<tk-field label="Arrival date" error="Arrival date must be a real date">
  <tk-date-picker name="arrival"></tk-date-picker>
</tk-field>

При наведении поле не меняется. В фокусе рамка окрашивается в цвет фокуса и утолщается внутрь. Пока календарь открыт и фокус в нём, поле фокус не показывает.

readonly: дату можно выделить и скопировать; кнопка календаря не работает.
disabled: ничего не работает, дата не уходит с формой.
Ошибка: задайте error на Field. Рамка станет красной, под полем появится текст.

Ввод даты

Текст разбирается, когда человек нажимает Enter или уходит из поля, но не во время набора. Подходят все эти формы:

2026-03-27
27 mar 2026, March 27, 2026 или 27 March (текущий год)
27 3 2026, 27/3/2026 или 27.3.2026: день, месяц, год

Год — четыре цифры. Разобранную дату поле показывает как «27 Mar 2026».

Если текст не похож на настоящую дату, поле оставляет его, сбрасывает значение и не даёт отправить форму. Сообщение покажите через error на Field; см. Текст.

Открытие календаря

Календарь открывает его кнопка или Down в поле. Фокус, клик или набор текста в поле его не открывают.
Фокус переходит на выбранный день, иначе на сегодня, иначе на первый доступный день.
Выбор дня задаёт значение, закрывает календарь и возвращает фокус в поле. Кнопки OK нет.
Esc, клик снаружи или Tab закрывают календарь, ничего не меняя. Esc не закрывает диалог вокруг.
Можно кликнуть обратно в поле и печатать, календарь останется открытым.

Памятные даты

Дату, которую помнят наизусть, вводят в Input, без календаря:

<tk-field label="Day"><tk-input inputmode="numeric" autocomplete="bday-day"></tk-input></tk-field>
<tk-field label="Month"><tk-input inputmode="numeric" autocomplete="bday-month"></tk-input></tk-field>
<tk-field label="Year"><tk-input inputmode="numeric" autocomplete="bday-year"></tk-input></tk-field>

Отдельные поля для дня, месяца и года под общей подписью вроде «Дата рождения» и одна подсказка: «Например, 27 3 2007». Если места мало — одно поле.
Месяц просите числом, а не выбором из списка.
Не переводите фокус в следующее поле автоматически.
Для даты рождения задайте autocomplete: bday-day, bday-month, bday-year или bday для одного поля.

Когда использовать

Спросите себя, знает ли человек дату заранее.

Date picker — для близкой даты, где важны день недели или удалённость: запись, бронирование, срок.
Дату, которую помнят наизусть, вводят в обычные поля: день рождения, срок действия документа. См. Памятные даты.
Для периода берите Date range picker. Не ставьте рядом два поля даты.
Для времени — Time picker рядом с полем даты.
Calendar — когда сетка должна быть видна на странице постоянно.

Текст

Назовите в подписи роль даты: «Дата вылета», а не «Дата».
Формат дайте в подсказке с примером: «Например, 27 3 2026». Не только в плейсхолдере: он исчезает, как только человек начинает печатать.
Покажите первую подходящую ошибку и повторите слова из подписи:

Проблема	Текст ошибки
пусто, а поле обязательное	«Введите дату вылета»
нет года или он короткий	«В дате вылета должен быть полный год»
такой даты нет	«Дата вылета должна быть настоящей датой»
вне допустимых дат	«Дата вылета должна быть в будущем» или «… между 5 марта и 30 сентября 2026»

Без «Неверная дата» и «Пожалуйста». Подробнее в Errors.

Можно / нельзя

✅ Можно	❌ Нельзя
Назвать роль даты: «Дата вылета»	Подписать поле просто «Дата»
Дать «Например, 27 3 2026» в подсказке	Дать формат только в плейсхолдере
Вводить день рождения в обычные поля	Выбирать день рождения в календаре
Задать `min` и `max`	Разрешать любую дату любого года
Брать Date range picker для периода	Ставить два поля даты рядом как период
Поставить рядом Time picker для времени	Спрашивать время внутри поля даты

Field: подпись, подсказка и ошибка вокруг поля.
Calendar: сетка внутри, её клавиши и режим периода.
Date range picker: дата начала и конца.
Time picker: время рядом с датой.
Input: та же рамка поля и основа для памятных дат.

API

Атрибуты

Атрибут	Тип	По умолчанию	Что делает
`value`	дата ISO (`yyyy-mm-dd`)	`''`	дата; отправляется под `name`
`name`	строка	—	имя поля в форме
`min` / `max`	дата ISO	—	допустимые даты; более ранняя или поздняя блокирует отправку
`week-start`	`1`–`7`	`1`	первый день недели в календаре, от понедельника до воскресенья
`required`	boolean	`false`	пустое поле блокирует отправку; видимой отметки нет (звёздочку ставит Field)
`readonly`	boolean	`false`	можно выделить и скопировать; кнопка календаря не работает
`disabled`	boolean	`false`	не получает фокус, не уходит с формой
`autocomplete`	строка	—	назначение для автозаполнения, например `bday`
`placeholder`	строка	—	текст в пустом поле; лучше не использовать
`size`	`medium` \| `large`	`medium`	высота 32 / 36px

События

change срабатывает, когда дата меняется: после ввода разборчивой даты или выбора дня. input срабатывает на каждое нажатие клавиши. Установка value из кода событий не вызывает. Сброс формы возвращает первое значение.

CSS

::part(field): рамка поля.
::part(input): нативное текстовое поле.
::part(popover): панель календаря.

Токены

Рамка поля берёт токены Input, сетка — токены Calendar. Свои у поля даты:

Часть	Токены
кнопка календаря	24×24px, `radius-full`; иконка `icon/default`, `icon-size-16`; неактивная `icon/disabled`
кнопка календаря, наведение / нажатие	`state/hover` / `state/press`
кнопка календаря, фокус	кольцо `border/accent/focus` внутри кнопки
всплывающая панель	`surface/raised` + `shadow-2`, `radius-16`, 4px от поля

В высококонтрастной теме у панели ещё и рамка 1px border/default. Значения для каждой темы: Color.

Доступность

Встроено:

Нативное текстовое поле, которое объявляется как комбобокс с календарём, открытым или закрытым.
Кнопка календаря называется «Choose date», а когда дата есть — «Change date, 17 Mar 2026».
Каждое открытие переводит фокус в календарь, каждое закрытие ставит его в разумное место.
Неразборчивая дата, пустое обязательное поле или дата вне границ блокируют отправку и переводят фокус в поле.
Кнопка календаря 24px — минимальная цель нажатия.

Ваша часть:

Дайте каждому полю имя: подпись Field с ролью даты или aria-label.
Положите пример формата в подсказку.
Задайте min и max под даты, которые имеют смысл.
Пишите ошибки на Field, как сказано в разделе Текст.

Клавиша	Действие
`Tab`	поле, потом кнопка календаря, потом дальше
`Down` / `Alt` + `Down`	открывает календарь и переводит в него фокус
`Enter`	разбирает введённую дату; если календарь закрыт, отправляет форму
`Esc`	закрывает календарь

Клавиши внутри календаря: Calendar.

Пределы контраста

Рамка поля: 1.33:1 в светлой теме и 2.00:1 в тёмной, ниже минимума 3:1; 4.22:1 в высококонтрастной. Всегда показывайте подпись.

Анатомия

Размеры

Состояния

Ввод даты

Открытие календаря

Памятные даты

Когда использовать

Текст

Можно / нельзя

Связанные

API

Атрибуты

События

CSS

Токены

Доступность

Пределы контраста