Github每日精选（第30期）：javascript 日期时间选择器flatpickr

flatpickr

flatpickr 是轻量级、强大的javascript 日期时间选择器，它没有依赖项。

github上的地址在这里。

几乎每个大型 SPA 或项目都涉及日期和时间输入。浏览器的本机实现在功能上不一致且有限。大多数其他库都要求您引入重度依赖项，例如 jQuery、Bootstrap 和 moment.js。我想要开箱即用、无依赖、强大且可扩展的外观。

功能概述：

flatpickr 以其他库的一小部分大小提供更多功能。

安装

安装一个 flatpickr 模块

flatpickr 主要通过 npm 交付。

# using npm install
 npm i flatpickr --save
 

非模块环境

如果出于任何原因，您被限制在非模块环境中（例如，没有 webpack 之类的打包工具） - 不要担心。我建议简单地flatpickr从jsdelivr.

用法

如果您使用的是捆绑器，例如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 directly
 flatpickr(element, {});// Otherwise, selectors are also supported
 flatpickr("#myID", {});// creates multiple instances
 flatpickr(".anotherSelector");
 

配置是可选的并传入一个对象{}。

jQuery

如果你有 jQuery，flatpickr 可以作为插件使用。简单地

$(".selector").flatpickr(optional_config);