Поле с датой DatePicker

Давно не обновляли

Поле помогает вводить дату с клавиатуры или выбирать её с помощью мыши.

Используйте поле с датой, когда нужно ввести дату в формате ДД.ММ.ГГГГ.

Поле с датой отличается от обычного поля ввода наличием иконки, маски и блока календаря.

Календарь и маска появляются всегда, когда поле получает фокус. Для этого можно кликнуть по самому полю или иконке, также можно перейти в поле табом.

Если можно предположить, какое значение введёт пользователь, предложите быстрый ввод соответствующих дат:

Блок календаря состоит из заголовка и скроллируемой области с календарной сеткой. Когда курсор находится над календарной сеткой, основной скролл страницы блокируется.

В заголовке показывается название текущего месяца и года.

Календарный блок «следует» за значением в поле: поменяли месяц с клавиатуры — календарь скроллится до соответствующей даты.

При клике на год или месяц раскрываются соответствующие списки. Список открывается «вокруг» выбранного пункта, но если верхняя граница списка оказывается за пределами экрана, список смещается вниз так, чтобы верхняя граница вошла.

В списке годов одновременно показывается 11 пунктов, чтобы сверху и снизу было по 5 строк. Список также можно скроллить колесом мышки или кнопками вверху и внизу списка: однократное нажатие скроллит список сразу на 3 строки, если зажать кнопку, список начнёт скроллиться непрерывно. Нажатие клавиши Esc закрывает список, другого управления с клавиатуры у списка нет.

После выбора месяца или года из раскрывающегося списка значение подставляется в поле ввода, календарь скроллится к соответствующей дате.

В нижней части календаря есть кнопка «Сегодня», нажатие на которую скроллит календарь до текущего месяца, выбирается текущий день. Календарь при этом не закрывается — это полезно для сценариев, когда пользователю нужно выбрать дату, близкую сегодняшней.

Если выбор текущей даты не нужен по сценарию, кнопку можно не показывать.

В контрол можно передать данные производственного календаря. Компонент подсветит красным праздничные дни, так же, как выходные.

Если пользователь должен выбрать дату только внутри заданного периода — ограничьте выбор, передав в параметры максимальную и минимальную дату. Недоступные для выбора дни будут отображаться серым и высветленным красным.

Правила выделения дат и наведения, как в раскрывающемся списке: выбранный день выделяется серым фоном, фон дня под курсором — светло-серым.

Выбранный день выделяется серым кружком #E6E6E6.

Заблокированные дни отображаются с прозрачностью 50 %.

Поле с датой, как и обычное поле ввода, может быть трёх размеров. Подробнее — в гайде «Поле ввода».

Некорректные даты должны быть заблокированы в блоке с календарной сеткой. Если пользователь указал некорректную дату с помощью клавиатуры, при потере фокуса поле валидируется и подсвечивается красным:

Если поле обязательно для заполнения:

Подробнее о поведении полей ввода с ошибками — в гайде «Валидация».

Редактирование значения в поле отличается от обычного поля с маской. При получении фокуса в поле не появляется текстовый курсор, вместо этого выделяется одна из трёх частей даты.

Если фокус получает пустое поле, всегда выделяется первый блок:

После ввода двух цифр выделение переходит на месяц:

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

После ввода четырёх цифр года выделение остаётся на месте, если пользователь продолжает набирать — ввод игнорируется, как в поле с маской: поле вспыхивает синим, значение не меняется.

В заполненном поле клик мышкой выделяет ту часть даты, над которой был курсор:

Нажатие клавиш ← → перемещает область выделения:

Клавиши ↑ ↓ увеличивают или уменьшают выделенное значение на 1. Увеличение/уменьшение затрагивает только выделенное значение, например, за 31 января следует 1 января и наоборот:

Если период выбора даты ограничен, увеличение/уменьшение просто останавливается у границы. Например, нельзя выбирать дату позднее 31 декабря 2020 года — при нажатии клавиши ↑ поле вспыхивает синим, но значение не меняется.

Backspace работает как в обычном поле с маской: последовательно удаляет цифры с конца выделенной части даты, перепрыгивая разделители-точки:

Если пользователь ввёл число из одной или двух цифр — контрол считает это указанием дня текущего месяца.

Поле корректно обрабатывает вставку даты из буфера обмена, приводя значение к правильному формату:

При скролле название следующего месяца выталкивает текущий месяц из заголовка.