Что это такое?
flatpickr — это лёгкий JavaScript-виджет выбора даты и времени для веба: аккуратный всплывающий календарь, который прикрепляется к вашим полям ввода и умеет работать с датами, временем и диапазонами дат.
flatpickr — это лёгкий JavaScript-виджет выбора даты и времени для веба: аккуратный всплывающий календарь, который прикрепляется к вашим полям ввода и умеет работать с датами, временем и диапазонами дат.Почему бы не использовать обычное поле для даты, которое уже есть в браузере?Встроенные календари в разных браузерах выглядят и работают по-разному, а по возможностям ограничены. flatpickr везде выглядит и ведёт себя одинаково и добавляет функции, которых нет у штатных полей, — и при этом весит куда меньше других похожих библиотек.
Встроенные календари в разных браузерах выглядят и работают по-разному, а по возможностям ограничены. flatpickr везде выглядит и ведёт себя одинаково и добавляет функции, которых нет у штатных полей, — и при этом весит куда меньше других похожих библиотек.Как подключить его к своему проекту?Установите пакет flatpickr из npm, подключите его файлы CSS и JS и привяжите его к полю ввода. Живые примеры и полная документация — на flatpickr.js.org.
Установите пакет flatpickr из npm, подключите его файлы CSS и JS и привяжите его к полю ввода. Живые примеры и полная документация — на flatpickr.js.org.Нужны ли ему jQuery, moment.js или что-то ещё для работы?Нет. flatpickr вообще не зависит от других библиотек, так что ничего не раздувает ваш код — отказаться от тяжёлых зависимостей вроде jQuery, Bootstrap и moment.js и было его главной идеей.
Нет. flatpickr вообще не зависит от других библиотек, так что ничего не раздувает ваш код — отказаться от тяжёлых зависимостей вроде jQuery, Bootstrap и moment.js и было его главной идеей.Будет ли он работать у пользователей со старыми браузерами?Да. Поддерживаются IE9 и выше, Edge, iOS Safari 6+, Chrome 8+ и Firefox 6+, то есть практически все браузеры, которые ещё используются.
Да. Поддерживаются IE9 и выше, Edge, iOS Safari 6+, Chrome 8+ и Firefox 6+, то есть практически все браузеры, которые ещё используются.Он правда бесплатный или потом станет платным?Он распространяется по лицензии MIT, и автор прямо обещает, что flatpickr никогда не сменит лицензию и не станет приставать к пользователям с просьбами о донатах.
Он распространяется по лицензии MIT, и автор прямо обещает, что flatpickr никогда не сменит лицензию и не станет приставать к пользователям с просьбами о донатах.Что он умеет, кроме выбора одной даты?Сразу из коробки: ввод даты и времени, выбор диапазона, выбор нескольких дат, режим только с выбором времени, понятный человеку формат отображения дат, номера недель, а также отключение отдельных дат или диапазонов по произвольной логике.
Сразу из коробки: ввод даты и времени, выбор диапазона, выбор нескольких дат, режим только с выбором времени, понятный человеку формат отображения дат, номера недель, а также отключение отдельных дат или диапазонов по произвольной логике.Я использую React или Vue — есть ли готовая обёртка?Да. Есть компоненты для React, Preact, Vue, Angular, Ember, Svelte и lit, аддон для angularJS и контроллер для Stimulus.js, так что он встраивается в большинство стеков.
Да. Есть компоненты для React, Preact, Vue, Angular, Ember, Svelte и lit, аддон для angularJS и контроллер для Stimulus.js, так что он встраивается в большинство стеков.Можно ли подогнать его под тёмную тему сайта?Да — из коробки идёт 8 цветных тем, включая тёмную и material-варианты, а многочисленные плагины добавляют дополнительное поведение.
Да — из коробки идёт 8 цветных тем, включая тёмную и material-варианты, а многочисленные плагины добавляют дополнительное поведение.Будет ли он говорить на языке моих пользователей?Да — встроено 51 локаль, так что календарь сможет отображаться на языке пользователя без дополнительных усилий.
Да — встроено 51 локаль, так что календарь сможет отображаться на языке пользователя без дополнительных усилий.What are similar projects?dayjs, tui.calendar, react-dates, date-fns, bootstrap-datepicker, list.js, Android-PickerView, luxon
dayjs, tui.calendar, react-dates, date-fns, bootstrap-datepicker, list.js, Android-PickerView, luxonWhich topics is it in?datepicker, date, calendar, widget, vanilla-javascript, no-dependencies, localization, dark-mode, themes, lightweight, javascript-library, ui
datepicker, date, calendar, widget, vanilla-javascript, no-dependencies, localization, dark-mode, themes, lightweight, javascript-library, ui