Создать минималистский выбор даты и времени с помощью Flatpickr

Одним из самых сложных полей для создания является выбор даты / времени. Разработчики часто прибегают к простым меню выбора для месяца / дня / года или полагаются на различные плагины, чтобы сделать работу.

Некоторые поля работают нормально, но они немного неуклюжи. Вместо этого вы можете оживить свою форму с помощью Плагин Flatpickr, Это бесплатный JavaScript-календарь с открытым исходным кодом с нулевыми зависимостями.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Определенный способ форматировать даты для международных сайтов

Одна приятная вещь об этом плагине – это множество пользовательских опций. Вы можете изменить стиль отображения даты в текстовом поле и места начала календаря (по умолчанию «сегодня»).

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

Посмотрите на Страница примеров увидеть Flatpickr в действии.

Вы также можете установить целевые параметры, чтобы ограничить поведение средства выбора даты, например:

Запрет определенных дат / диапазонов
Разрешить только определенные даты / диапазоны
Разрешить выбор нескольких дат
«Режим диапазона» для выбора даты начала и окончания
Просто указатель даты, или просто время, или дата и время вместе

Варианты практически безграничны, и все они работают через этот единственный плагин JavaScript.

Мобильные пользователи часто предпочитают встроенный инструмент выбора даты, но вы можете переопределить его с помощью мобильной настройки в JavaScript. Таким образом, у вас будет одинаковый интерфейс, работающий на всех устройствах.

И вы даже можете добавить поддержку IE9 с polyfill что делает его одним из наиболее поддерживаемых плагинов для выбора даты.
Установка проста с помощью команд для npm, Bower и Yarn. Или вы можете скачать исходные файлы напрямую от GitHub если вы предпочитаете этот маршрут.

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

Читайте также: типы ввода форм HTML5: дата, цвет и диапазон