Создать минималистский выбор даты и времени с помощью Flatpickr
Одним из самых сложных полей для создания является выбор даты / времени. Разработчики часто прибегают к простым меню выбора для месяца / дня / года или полагаются на различные плагины, чтобы сделать работу.
Выбор полей работает нормально, но они немного неуклюжи. Вместо этого вы можете оживить свою форму с помощью Flatpickr плагин. Это бесплатный JavaScript-календарь с открытым исходным кодом с нулевыми зависимостями.
это было разработан с учетом минимализма, так что он может вписаться в любой макет сайта, любую веб-форму и должен использоваться с любого современного устройства.
Одна хорошая вещь об этом плагине является множество пользовательских опций. Вы можете изменить стиль отображения даты в текстовом поле и начала календаря (по умолчанию “сегодня”).
Но вы также можете используйте это как строгое средство выбора даты если у вас нет необходимости в выборе времени. Это просто дополнительная функция, которая позволяет передавать больше данных через форму с помощью одного средства выбора..
Посмотрите на Страница примеров увидеть Flatpickr в действии.
Вы также можете установить целевые параметры ограничить поведение выбора даты, например:
- Запрещение определенных дат / диапазонов
- Разрешить только определенные даты / диапазоны
- Разрешить выбор нескольких дат
- “Режим диапазона” выбрать дату начала и окончания
- Просто сборщик дат, или просто время, или дата и время вместе
Варианты практически безграничны, и все они работают через этот ванильный плагин JavaScript.
Мобильные пользователи часто предпочитают нативный сборщик дат, но вы можете переопределить это с помощью мобильной настройки в JavaScript. Таким образом, у вас будет одинаковый интерфейс, работающий на всех устройствах.
И вы можете даже добавить поддержку IE9 с полифилом что делает этот плагин одним из наиболее поддерживаемых.
Установка проста с Команды для npm, Bower и Yarn. Или вы можете скачать исходные файлы прямо с GitHub если вы предпочитаете этот маршрут.
Все, что вам нужно знать, можно найти на странице настройки, которая показывает вам как добавить файлы в шапку & как назвать эту дату выбора на любом поле. Легко один из лучших плагинов выбора даты, разработанный достаточно просто, чтобы соответствовать любому дизайну.
