flatpickr 使用_使用Flatpickr创建极简主义的日期时间输入选择

要创建的最棘手的字段之一是日期/时间选择 。 开发人员通常在月/日/年使用简单的选择菜单，或者依靠各种插件来完成工作。

选择的字段工作正常，但有点笨拙。 相反，您可以使用Flatpickr插件来完善表单。 这是一个免费的，开源JavaScript日历选择器，具有零依赖关系 。

它在设计时考虑了极简主义 ，因此它可以适合任何网站布局，任何Web表单，并且可以在任何现代设备中使用。

关于此插件的一件好事是各种自定义选项 。 您可以重新设置日期在文本字段中的显示方式以及日历的开始位置（默认设置为“今天”）。

但是，如果您不需要时间选择，也可以将其严格用作日期选择器 。 这只是一项可选功能，使您可以使用此选择器通过表单传递更多数据。

看一下“ 示例”页面，以查看Flatpickr的运行情况。

您还可以设置目标选项来限制日期选择器的行为，例如：

• 禁止某些日期/范围
• 仅允许某些日期/范围
• 允许选择多个日期
• “范围模式”选择开始和结束日期
• 只是一个日期选择器，或者只是时间，或者两个日期和时间在一起

这些选项实际上是无穷无尽的，它们都通过这个原始JavaScript插件起作用。

移动用户通常更喜欢本机日期选择器，但是您可以使用JavaScript中的移动设置覆盖它 。 这样，您将在所有设备上使用相同的界面。

而且，您甚至可以添加带有polyfill的 IE9支持，这使其成为那里最受支持的日期选择器插件之一。

使用npm，Bower和Yarn的命令安装很简单。 或者，如果您愿意的话，可以直接从GitHub下载源文件。

您需要了解的所有信息都可以在设置页面上找到，该页面显示了如何将文件添加到标题以及如何在任何字段上调用此日期选择器 。 最好的日期选择器插件之一很容易设计，足以适合任何设计 。

翻译自: https://www.hongkiat.com/blog/flatpickr-date-picker-plugin/