Выбор времени и даты — частая задача в современной веб-разработке. Простой и интуитивно понятный интерфейс является залогом успешной коммуникации между вашим приложением и пользователями.
В этой статье мы рассмотрим инструменты Webix, которые помогут вам получить от пользователей данные о времени и дате.
Простой выбор времени и даты с Webix Calendar
Webix Calendar предоставляет базовые возможности выбора времени и даты, и может быть полезен, например, при заполнении формы. Этот виджет интегрирован в другой компонент — Webix Datepicker, который позволяет сразу заносить выбранные данные в текстовое поле
Вы также можете запросить у пользователей только время. Для этого достаточно перевести Calendar или Datepicker в соответствующий режим с помощью всего одной строчки кода:
{ view:"calendar", type: "time" },
{ view:"datepicker", type: "time" },
]
Проще простого 🙂
Если для выбора вам необходим диапазон времени или дат, присмотритесь к виджетам DateRange и DateRangePicker.
Преимущества данного подхода
Так как пользователи ограничены в своём выборе интерфейсом виджета, они не смогут выбрать недопустимые значения времени или даты. Даже если вы сделаете поля ввода редактируемыми, Calendar попытается обработать текст и выдать валидное значение.
Кроме того, у вас есть возможность заблокировать какие либо даты и/или время, используя функции blockDates и blockTime, внутри которых можно отфильтровать желаемые значения с помощью модуля Date:
view:"calendar",
// блокирует уже прошедшие даты
blockDates: date => date < webix.Date.datePart(now),
// блокирует время до 8:00
blockTime: time => webix.Date.timePart(time) < 28800
}
Вы также можете указать минимальное и максимальное значения для даты и времени. Все значения за пределами указанных будут заблокированы:
view:"calendar",
minTime: “06:00”,
maxDate:new Date(2021, 6, 20)
}
Недостатки данного подхода
Вышеупомянутые ограничения интерфейса не позволяют выбирать время с высокой точностью. В распоряжении пользователей возможность выбрать интервал времени в 5 или более минут.
Выбор времени из заранее заданных опций
А что если пользователям необходимо выбрать время с точностью до минуты? Не беда! Давайте рассмотрим другие Webix решения, которые хоть и не предназначены для этого, но тем не менее помогут выбрать точные значения. Webix Combo (или его нередактируемый вариант, Webix RichSelect) позволяют заранее указать любые опции. То, что нам нужно!
Преимущества данного подхода
Можно указывать время с точностью до минуты, а также задавать любой временной интервал.
Недостатки данного подхода
Иногда, например, в случае с минутами, список опций может получиться достаточно длинный, что не очень удобно для пользователя.
Выбор времени вручную с Webix Slider
Ещё один инструмент, который поможет выбрать время с точностью до минуты, это Webix Slider. Виджет можно использовать вместе с Webix Text для большей гибкости.
Преимущества данного подхода
Пользователь сможет выбрать время с помощью слайдера или же ввести необходимые данные в поле, что упрощает процесс выбора на мобильных устройствах. Вы также можете настроить временной интервал.
Недостатки данного подхода
Заблокировать определённые значения может быть проблематично.
Что дальше
В библиотеке Webix существует множество инструментов для выбора времени и даты. Каждое решение имеет свои плюсы и минусы, поэтому вам решать, какой из инструментов наиболее эффективно справится с задачами вашего приложения.
Делитесь своими идеями о том, какие решения для выбора времени и даты вы бы хотели видеть среди виджетов Webix, или спрашивайте интересующие вас вопросы в комментариях ниже.
