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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *