Определение

Date input — поле формы, предназначенное для ввода даты или диапазона дат с помощью клавиатуры.

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

Основные правила

• Поле с датой отличается от обычного поля ввода наличием иконки календаря.
• Раскрытие календаря происходит при клике на иконку в поле.
• Закрытие календаря осуществляется при клике на любую область вне. Календарь закрывается при последовательном выборе данных (день, месяц, год). Также закрыть календарь можно при нажатии клавиши «Esc».
• Пользователь может ввести дату с помощью клавиатуры или выбрать в визуальном представлении календаря.
• Если пользователь указал некорректную дату с помощью клавиатуры, при потере фокуса поле валидируется и подсвечивается красным.
• Ввод буквенных значений в поле Datepicker не допустимо.
• Даты, которые нельзя выбрать, должны иметь состояние Disabled. При этом на этих них должен появляться Tooltip с текстом «Дата недоступна для выбора».
• Последние/первые дни предыдущего/следующего месяца должны быть серыми.
• Если пользователю необходимо ввести период времени вместо двух отдельных средств выбора даты, используйте тип поля Date range.
• Пользователь может увеличивать или уменьшать дату, нажимая стрелки вверх/вниз на клавиатуре.

Построение

• Календарь состоит из заголовка (текущий месяц и год), стрелок прокрутки месяцев, календарной сетки.
• Радиус скругления всех полей равен 4 px.
• Соблюдение отступов внутри и снаружи — обязательное условие.