Поле ввода с датой DatePicker

Календарь помогает вводить дату с клавиатуры и выбирать дату курсором.

Описание работы

Календарь состоит из поля ввода и выпадающего блока выбора даты. При нажатии на иконку календаря поле ввода получает фокус и появляется блок выбора даты.

Выпадающий блок состоит из заголовка и скроллируемой области с календарной сеткой.

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

При клике на год или дату в заголовке появляется выпадающий список. Выпадающие списки располагаются так, чтобы выбранный месяц или год в списке совпадал с месяцем или годом в заголовке. Список лет появляется так, чтобы было видно десятилетие, при этом из будущего видны только два года. То есть, если выбран 2015 год — из будущего видны 2016 и 17 а из прошлого 2007-2014. Так сделано потому, что чаще всего мы указываем даты из прошлого.

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

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

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

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

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

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

Внешний вид

Месяцы в ленте разделяйте чересполосицей — серым и белым фоном.

Сегодняшнюю дату выделяйте начертнием Negreta.

Выбранный день выделяйте черным прямоугольником #000 с прозрачностью 9%. Прозрачный черный блок одинаково контрастно выглядит на белом и на сером фонах.

У января дописывайте год.

Анимация

При появлении выпадающего блока запускается анимация прокрутки месяцев от предыдущего к текущему с постепенным замедлением (easings.net/ru#easeOutExpo).

Работа с клавиатурой

Число, месяц и год при вводе пользователь может разделять пробелами, точками, запятыми или слешами. Может не разделять. Год можно писать как целиком, так и только последние две цифры.

При потере фокуса контрол проверяет введенное значение и приводит его к формату ДД.ММ.ГГГГ.

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

У заполненного поля курсор работает, как в текстовом поле. Но стрелками вверх и вниз можно изменять значения той секции, в которой находится курсор.

Двойной клик в поле выделяет только ту секцию, в которую попал курсор. Бекспейс стирает выделенную секцию целиком.

Валидация

При возникновении ошибки сообщите пользователю, как исправить ошибку.