Date selector and Calendar
В прошлой статье я упоминала, что в интерфейсе может быть еще один тип ввода - ввод данных или выбор даты. С помощью этого ввода пользователь может выбрать дату в календаре или записать ее самостоятельно. Давайте посмотрим, как это выглядит и работает!
Input types:
С иконкой календаря справа и только одной датой для выбора
С иконкой календаря справа и двумя датами
Типы компонентов по состоянию
Default
Hover
Focus
Typing
Entered
Disabled
Error
Error focus
Это поле может быть с одним или двумя лейблами, как при обычном вводе.
Сложность этого ввода заключается в том, что календарь появляется в момент нажатия на ввод. Вот почему нам нужно ознакомиться с состояниями календаря, чтобы использовать эти компоненты вместе.
Компонент Календарь
Компонент календаря очень удобен, когда пользователю необходимо выбрать дату (особенно в текущем/следующем месяце).
Теперь давайте посмотрим, какие типы и состояния дат мы можем использовать в этом компоненте.
Во время работы с календарем я создал даты для праздников, а также для государственных праздников (поскольку в случае праздников стоимость праздничных и нерабочих дней отличается) и даты в выбранном диапазоне дат.
Размещение
Календарный компонент может быть короче / длиннее инпута, в этом нет ничего сложного. Просто обратите внимание, что календарный компонент всегда находится слева во всех случаях.
Разные случаи
Случай, когда пользователь уже выбрал диапазон и хочет изменить этот диапазон. В этом случае кнопка “Подтвердить” отключается до того, как пользователь изменит какую-либо дату в календаре или при вводе.
Случай, когда диапазон не был выбран.
Когда пользователь выбирает дату в будущем, появляется сообщение об ошибке, и дата в календаре не меняется.
Сегодня мы создали средство выбора даты, чтобы облегчить пользователю выбор даты или диапазона дат.
Я надеюсь, что эта статья помогла вам при создании состояний для полей выбора даты для UI kit.
Если у вас есть какие-либо вопросы, вы можете написать в комментариях или в любой из социальных сетей, я всегда рад помощи и обратной связи)
Work smart, not hard!
Чтобы сказать привет, используй
Email: stasyabis7@gmail.com
Telegram, Medium, LinkedIn: @stasyabis
Viber: +79877503993
Портфолио: Behance
Фотографии: Unsplash
Вебсайт: Website