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

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

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

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

Flatpickr JavaScript插件

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

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

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

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

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

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

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

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

Flatpickr插件示例

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

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


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值