Створити мінімалістичний вхідний вибір даних за допомогою Flatpickr
Одним з найбільш складних полів для створення є дати / часу. Розробники часто вдаються до простого вибору меню для місяця / дня / року або покладаються на різні плагіни для виконання цієї роботи.
Вибрати поля працюють відмінно, але вони трохи незграбні. Замість цього, ви можете піджакувати форму за допомогою Плагін Flatpickr. Це безкоштовний вибір з відкритим вихідним кодом JavaScript з нульовими залежностями.
Це було розроблений з урахуванням мінімалізму, тому він може вписатися в будь-який макет веб-сайту, будь-яку веб-форму і повинен бути використаний з будь-якого сучасного пристрою.
Одна хороша річ про цей плагін є різноманітність користувацьких опцій. Можна змінити стиль відображення дат у текстовому полі та місце, де починається календар (за замовчуванням “сьогодні”).
Але, ви також можете використовуйте його як строго вибору дати якщо у вас немає необхідності у виборі часу. Це просто опціональна функція, яка дозволяє передати більше даних через форму з цим одним вибором.
Погляньте на Сторінка "Приклади" щоб побачити Flatpickr в дії.
Ви також можете встановити цільові параметри обмежити поведінку вибору дати, наприклад:
- Заборона певних дат / діапазонів
- Дозволяється лише певні дати / діапазони
- Дозвіл вибору декількох дат
- “Режим діапазону” , щоб вибрати дату початку та завершення
- Просто вибору дати, або просто час, або обидві дати і часу разом
Варіанти практично нескінченні, і всі вони працюють через цей ванільний JavaScript плагін.
Мобільні користувачі частіше віддають перевагу віртуальному вибору, але ви можете перекрити це налаштуваннями для мобільних пристроїв у JavaScript. Таким чином, у всіх пристроях буде працювати однаковий інтерфейс.
І навіть можна додайте підтримку IE9 з поліфайлом що робить його одним з найбільш добре підтримуваних плагінів для вибору дати.
Установка проста команд для npm, Bower та пряжі. Або ви можете завантажити вихідні файли безпосередньо від GitHub якщо ви віддаєте перевагу цьому маршруту.
Все, що потрібно знати, можна знайти на сторінці налаштування, яка показує вам як додати файли до заголовка & як викликати цей вибір дати в будь-якому полі. Легко один з кращих плагінів вибору дати, розроблений досить просто, щоб вмістити будь-який дизайн.
