Календарь
Календарь — сетка месяца, которая всё время на странице. В ней выбирают один день, а в режиме mode="range" — период.
<tk-calendar label="Departure date" value="2026-03-17"
min="2026-03-05" max="2026-09-30"></tk-calendar>Анатомия
| Часть | Что это |
|---|---|
tk-calendar |
сам элемент; одна остановка Tab |
| заголовок | месяц и год, например «March 2026»; он же имя сетки |
| кнопки листания | «Previous month» и «Next month»; неактивны, если месяц вне границ |
| строка дней недели | двухбуквенные названия; скринридер читает полное |
| сетка дней | всегда шесть строк, поэтому высота при листании не меняется |
| ячейка дня | 32×32px; у выбранного дня за числом круг |
part grid |
таблица с сеткой дней |
Углы сетки заполняют дни соседних месяцев. Они приглушены, но работают: если выбрать такой день, он выделится и календарь перелистнётся на его месяц. Если показано больше одного месяца, углы пустые. В сетке только дни.
Состояния
<tk-calendar label="Delivery date" value="2026-04-08"
min="2026-04-06" max="2026-04-24"></tk-calendar>| День | Как выглядит |
|---|---|
| сегодня | маленькая акцентная точка под числом |
| выбранный | залитый акцентный круг за числом |
| выбранный и сегодня | круг с точкой на нём |
| наведение / нажатие | серый круг |
| фокус с клавиатуры | кольцо фокуса вокруг дня |
| из соседнего месяца | серое число, нажимается |
вне min / max |
бледный, не нажимается и не получает фокус |
Начало недели
week-start задаёт первый день недели: от 1 (понедельник, по умолчанию) до 7
(воскресенье).
<tk-calendar label="Shift date" week-start="7"></tk-calendar>
Режим периода
mode="range" выбирает период. Первый выбор задаёт start, второй — end. Если
выбрать день раньше начала, начало сдвинется; выбор после готового периода начинает
новый. При наведении видно, каким будет период, ещё до второго клика.
<tk-calendar mode="range" start="2026-03-10" end="2026-03-18"
visible-months="2" label="Stay dates"></tk-calendar>- Концы периода получают акцентный круг, дни между ними — бледную акцентную полосу.
visible-monthsпоказывает до трёх месяцев рядом. Они работают как одна сетка: стрелки переходят из месяца в месяц, а кнопки листают весь блок.- Для формы берите
Date range picker : он построен на этом режиме.
Когда использовать
- Календарь — когда сетка должна быть видна постоянно, например на панели бронирования или в расписании.
- Для даты в форме берите
Date picker . Он открывает эту сетку во всплывающей панели и даёт ввести дату с клавиатуры. - Для периода в форме —
Date range picker . - Дату, которую человек и так знает, например день рождения, в календаре не
выбирают. Пусть её вводят: см.
Памятные даты .
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Ставить календарь, когда сетка должна быть видна | Использовать голый календарь как поле формы |
Задавать min и max под реальные даты |
Предлагать годы дат, которые никто не выберет |
| Давать ввести день рождения с клавиатуры | Заставлять листать календарь на десятилетия назад |
| Выбирать период в режиме периода | Ставить два календаря рядом ради периода |
| Оставлять вопрос пустым, пока человек не выберет | Заранее выбирать дату, подталкивая к ответу |
Связанные
Date picker : поле даты, которое открывает этот календарь.Date range picker : поле периода с календарём на два месяца.Time picker : время рядом с датой.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
value |
дата ISO (yyyy-mm-dd) |
'' |
выбранный день; при установке календарь показывает его месяц |
mode |
single | range |
single |
один день или период |
start / end |
дата ISO | '' |
концы периода в режиме периода |
visible-months |
1–3 |
1 |
сколько месяцев показать рядом |
min / max |
дата ISO | — | какие дни можно выбрать; листание останавливается на этих месяцах |
label |
строка | — | назначение, читается перед названием месяца, например «Departure date» |
week-start |
1–7 |
1 |
первый день недели, от понедельника до воскресенья |
События
change срабатывает, когда выбор дня меняет значение. В режиме периода — на оба выбора.
Не срабатывает, пока человек перемещается по сетке, и когда вы задаёте value, start
или end из кода.
Календарь не поле формы и ничего не отправляет. Для формы берите
CSS
::part(grid): таблица с сеткой дней.
Токены
| Часть | Токены |
|---|---|
| число дня | text/default, Body Small; соседний месяц text/secondary; вне границ text/disabled |
| наведение / нажатие | state/hover / state/press, radius-full |
| выбранный день, концы периода | fill/accent + text/accent/on-fill |
| полоса периода | state/accent/on |
| точка «сегодня» | icon/accent; на выбранном круге icon/accent/on-fill |
| кольцо фокуса | border/accent/focus |
| заголовок / дни недели | Label Medium text/default / Caption text/secondary |
| кнопки листания | icon/secondary, icon-size-16; неактивные icon/disabled |
| отступы | space-4 между ячейками, space-8 вокруг сетки |
Значения для каждой темы:
Доступность
Встроено:
- Скринридер слышит сетку с заголовками столбцов и полными датами, например «28 February».
- Одна остановка Tab; внутри сетки двигаются стрелками.
- Перемещение по сетке не меняет значение. Меняют только Enter, Space или клик.
- Заголовок объявляет каждый новый месяц и называет сетку.
- Сегодняшний день отмечен как текущая дата; дни вне
minиmaxобъявляются недоступными, клавиатура их пропускает. - В режиме периода каждый день внутри объявляется выбранным, концы — как «range start» и «range end», а готовый период — с числом дней.
- Дни 32px — больше минимальной цели нажатия в 24px.
Ваша часть:
- Задайте
label, если календарь ничем вокруг не назван. - Задайте
minиmaxпод реальные даты задачи.
| Клавиша | Действие |
|---|---|
Right / Left |
следующий / предыдущий день, с переходом в соседний месяц |
Down / Up |
тот же день недели на неделю позже / раньше |
Home / End |
первый / последний день недели |
Page Down / Page Up |
то же число в следующем / предыдущем месяце |
Shift + Page Down / Page Up |
то же число в следующем / предыдущем году |
Enter / Space |
выбирает день; в режиме периода сначала начало, потом конец |
Tab |
уводит из календаря |
Стрелки останавливаются на min и max.