flatpickr
flatpickr
是轻量级、强大的javascript 日期时间选择器,它没有依赖项。
github上的地址在这里。
几乎每个大型 SPA 或项目都涉及日期和时间输入。浏览器的本机实现在功能上不一致且有限。大多数其他库都要求您引入重度依赖项,例如 jQuery、Bootstrap 和 moment.js。我想要开箱即用、无依赖、强大且可扩展的外观。
功能概述:
无依赖(没有臃肿的捆绑包)简单、优美的用户体验日期+时间输入范围选择能够选择多个日期可以用作时间选择器以人性化的格式显示日期使用任意逻辑轻松禁用特定日期、日期范围或任何日期周数51 个地区8 个彩色主题(包括深色和材质)众多插件可用于 React、Angular、Vue、Ember 等的库
flatpickr 以其他库的一小部分大小提供更多功能。
安装
安装一个 flatpickr 模块
flatpickr 主要通过 npm 交付。
# using npm installnpm i flatpickr --save
非模块环境
如果出于任何原因,您被限制在非模块环境中(例如,没有 webpack 之类的打包工具) - 不要担心。我建议简单地flatpickr从jsdelivr.
<link rel="stylesheet" href="/npm/flatpickr/dist/flatpickr.min.css"><script src="/npm/flatpickr"></script>
用法
如果您使用的是捆绑器,例如webpack
,则需要导入flatpickr
。
// commonjsconst flatpickr = require("flatpickr");// es modules are recommended, if available, especially for typescriptimport flatpickr from "flatpickr";
以下所有方法都是创建 flatpickr 实例的有效方法。
// If using flatpickr in a framework, its recommended to pass the element directlyflatpickr(element, {});// Otherwise, selectors are also supportedflatpickr("#myID", {});// creates multiple instancesflatpickr(".anotherSelector");
配置是可选的并传入一个对象{}。
jQuery
如果你有 jQuery,flatpickr 可以作为插件使用。简单地
$(".selector").flatpickr(optional_config);