Date selector & Calendar

В прошлой статье я упоминала, что в интерфейсе может быть еще один тип ввода - ввод данных или выбор даты. С помощью этого ввода пользователь может выбрать дату в календаре или записать ее самостоятельно. Давайте посмотрим, как это выглядит и работает!

Date Selector picture

Input types

С иконкой календаря справа и только одной датой для выбора

Тип с иконкой календаря справа и выбором только одной даты

С иконкой календаря справа и двумя датами

Тип с иконкой календаря справа и выбором двух дат

Типы компонентов по состоянию

Default

Hover

Focus

Typing

Entered

Disabled

Error

Error focus

Пример состояний ввода данных с одной датой

Пример состояний ввода данных с двумя датами

Это поле может быть с одним или двумя лейблами, как при обычном вводе.

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

Компонент Календарь

Компонент календаря очень удобен, когда пользователю необходимо выбрать дату (особенно в текущем/следующем месяце).

Примеры различных типов календарей

Теперь давайте посмотрим, какие типы и состояния дат мы можем использовать в этом компоненте.

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

Примеры дат

Размещение

Календарный компонент может быть короче / длиннее инпута, в этом нет ничего сложного. Просто обратите внимание, что календарный компонент всегда находится слева во всех случаях.

Примеры различной длины ввода и календаря

Разные случаи

Случай, когда пользователь уже выбрал диапазон и хочет изменить этот диапазон. В этом случае кнопка “Подтвердить” отключается до того, как пользователь изменит какую-либо дату в календаре или при вводе.

Случай, когда пользователь уже выбрал диапазон и хочет изменить этот диапазон

Случай, когда диапазон не был выбран.

Случай, когда диапазон не был выбран

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

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

Я надеюсь, что эта статья помогла вам при создании состояний для полей выбора даты для UI kit.

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

Work smart, not hard!

Thumbnail for date picker

Чтобы сказать привет, используй

Email: stasyabis7@gmail.com

Telegram, Medium, LinkedIn: @stasyabis

Viber: +79877503993

Портфолио: Behance

Фотографии: Unsplash

Вебсайт: Website