Перейти к содержимому
Разделы
Язык, сейчас Русский
Дизайн-система Rastrillo

Дата и время

Четыре поля, которые улучшает datetime.js: под каждым остаётся встроенный элемент ввода, так что читатель без скриптов получает простой элемент управления, а не сломанный.

Каждый пример работает, но его ссылки никуда не ведут. HTML показывает разметку для копирования.

field-date

Обычное поле даты плюс комбобокс с разбором обычной речи, который включает datetime.js, если вызывающий не передал Plain. Наберите в нём "завтра".

Улучшенное поле: введите «завтра» или «через 3 недели»

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_live">Дата публикации</label>
  <input rst-input id="field-date_live" name="field-date_live" type="date" value="2026-09-04" aria-describedby="field-date_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-hint id="field-date_live-hint">День, когда это станет доступно.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "Дата публикации"
    "Value" "2026-09-04"
    "Hint" "День, когда это станет доступно."}}

Слова, которые оно разбирает, уезжают в data-rst-date-words, взятые из каталога этой страницы: поле разбирает тот язык, на котором страница написана.

Обязательное, с ошибкой

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_error">Дата публикации <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-date_error" name="field-date_error" type="date" required aria-invalid="true" aria-describedby="field-date_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-error id="field-date_error-error">Выберите дату позже сегодняшней.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "Дата публикации"
    "Required" true
    "Error" "Выберите дату позже сегодняшней."}}

С границами

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_bounded">В пределах этого года</label>
  <input rst-input id="field-date_bounded" name="field-date_bounded" type="date" value="2026-09-04" min="2026-01-01" max="2026-12-31" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "В пределах этого года"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

Plain: голое родное поле

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_plain">Дата публикации</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_plain"
    "Label" "Дата публикации"
    "Value" "2026-09-04"
    "Plain" true}}

Никаких атрибутов улучшения, поэтому datetime.js нечего найти. Родной выбор даты всё равно открывается.

field-time

Та же обёртка вокруг родного поля времени. Улучшение читает часы, а не календарь.

Улучшенное поле: введите «полвосьмого» или «полдень»

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_live">Открытие дверей</label>
  <input rst-input id="time_live" name="time_live" type="time" value="19:30" aria-describedby="time_live-hint" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-pick-time="Открыть часы" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-hint id="time_live-hint">Местное время.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_live"
    "Label" "Открытие дверей"
    "Value" "19:30"
    "Hint" "Местное время."}}

Обязательное, с ошибкой

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_error">Открытие дверей <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="time_error" name="time_error" type="time" required aria-invalid="true" aria-describedby="time_error-error" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-pick-time="Открыть часы" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-error id="time_error-error">Выберите время после саундчека.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "Открытие дверей"
    "Required" true
    "Error" "Выберите время после саундчека."}}

С границами

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_bounded">С девяти до одиннадцати</label>
  <input rst-input id="time_bounded" name="time_bounded" type="time" value="19:30" min="09:00" max="23:00" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-pick-time="Открыть часы" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "С девяти до одиннадцати"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

Plain: голое родное поле

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_plain">Открытие дверей</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "Открытие дверей"
    "Value" "19:30"
    "Plain" true}}

field-datetime

Дата и время в одном поле, одно значение.

Улучшенное поле: введите «завтра» или «через 3 недели»

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_live">Дата публикации</label>
  <input rst-input id="field-datetime_live" name="field-datetime_live" type="datetime-local" value="2026-09-04T19:30" aria-describedby="field-datetime_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-hint id="field-datetime_live-hint">Когда это станет доступно.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "Дата публикации"
    "Value" "2026-09-04T19:30"
    "Hint" "Когда это станет доступно."}}

Слова, которые оно разбирает, уезжают в data-rst-date-words, взятые из каталога этой страницы: поле разбирает тот язык, на котором страница написана.

Обязательное, с ошибкой

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_error">Дата публикации <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-datetime_error" name="field-datetime_error" type="datetime-local" required aria-invalid="true" aria-describedby="field-datetime_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
  <small rst-field-error id="field-datetime_error-error">Выберите дату позже сегодняшней.</small>
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "Дата публикации"
    "Required" true
    "Error" "Выберите дату позже сегодняшней."}}

С границами

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">В пределах этого года</label>
  <input rst-input id="field-datetime_bounded" name="field-datetime_bounded" type="datetime-local" value="2026-09-04T19:30" min="2026-01-01T00:00" max="2026-12-31T23:59" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_bounded"
    "Label" "В пределах этого года"
    "Value" "2026-09-04T19:30"
    "Min" "2026-01-01T00:00"
    "Max" "2026-12-31T23:59"}}

Plain: голое родное поле

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_plain">Дата публикации</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_plain"
    "Label" "Дата публикации"
    "Value" "2026-09-04T19:30"
    "Plain" true}}

Никаких атрибутов улучшения, поэтому datetime.js нечего найти. Родной выбор даты всё равно открывается.

field-daterange

Начало и конец как одна помеченная группа. Значения Name должны различаться, потому что из них выводятся идентификаторы.

Дата и время, с начальными значениями

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Когда</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">Начало</label>
      <input rst-input id="dr_starts_at" name="dr_starts_at" type="datetime-local" value="2026-09-04T19:30" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
    </div>
    <div rst-field>
      <label rst-field-label for="dr_ends_at">Окончание</label>
      <input rst-input id="dr_ends_at" name="dr_ends_at" type="datetime-local" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
    </div>
  </div>
</fieldset>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Когда"
    "Seed" "session"
    "Start" (dict "Label" "Начало" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "Окончание" "Name" "dr_ends_at")}}

Задайте начало, оставив конец пустым, — браузер подставит конец на час позже. Со стороны сервера ничего не подставляется.

Только даты, с ошибкой на конце

Предпросмотр

Поместите это внутрь <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Бронирование</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
      <label rst-field-label for="dr_from">С</label>
      <input rst-input id="dr_from" name="dr_from" type="date" value="2026-09-04" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
    </div>
    <div rst-field>
      <label rst-field-label for="dr_to">По</label>
      <input rst-input id="dr_to" name="dr_to" type="date" value="2026-09-01" aria-invalid="true" aria-describedby="dr_to-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;назад&#34;,&#34;am&#34;:&#34;am|утра&#34;,&#34;at&#34;:&#34;в|во&#34;,&#34;day&#34;:&#34;день|дня|дней|д&#34;,&#34;hour&#34;:&#34;час|часа|часов|ч&#34;,&#34;in&#34;:&#34;через&#34;,&#34;last&#34;:&#34;прошлый|прошлая|прошлое|прошлую|прошлой&#34;,&#34;midnight&#34;:&#34;полночь|полуночи&#34;,&#34;minute&#34;:&#34;минута|минуты|минут|мин|м&#34;,&#34;month&#34;:&#34;месяц|месяца|месяцев|мес&#34;,&#34;next&#34;:&#34;следующий|следующая|следующее|следующую|след&#34;,&#34;noon&#34;:&#34;полдень|полудня&#34;,&#34;pm&#34;:&#34;pm|вечера&#34;,&#34;today&#34;:&#34;сегодня&#34;,&#34;tomorrow&#34;:&#34;завтра&#34;,&#34;week&#34;:&#34;неделя|недели|недель|неделю&#34;,&#34;yesterday&#34;:&#34;вчера&#34;}" data-rst-date-set="Задать" data-rst-date-hint="Попробуйте: {example}" data-rst-date-pick="Открыть календарь" data-rst-date-calendar="Календарь" data-rst-date-prev-month="Предыдущий месяц" data-rst-date-next-month="Следующий месяц" data-rst-date-results="Подсказок: {n}" data-rst-date-result-one="1 подсказка" data-rst-date-quick-today="Сегодня" data-rst-date-quick-tomorrow="Завтра" data-rst-date-quick-next-week="Через неделю" data-rst-date-quick-plus-1h="На час позже" data-rst-date-quick-plus-2h="На два часа позже" data-rst-date-quick-end-of-day="Конец дня" data-rst-date-quick-next-day="То же время на следующий день">
      <small rst-field-error id="dr_to-error">Окончание раньше начала.</small>
    </div>
  </div>
</fieldset>

Поместите это внутрь <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Бронирование"
    "Kind" "date"
    "Start" (dict "Label" "С" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "Окончание раньше начала." "Label" "По" "Name" "dr_to" "Value" "2026-09-01")}}