使用jQuery时间戳程序的自定义时间输入字段

但是, 时间输入呢?

某些Web表单需要基于日期的输入,而日期选择器插件可以提供帮助。

使用免费的jQuery插件Timedropper ,您可以添加自定义时间选择器来设置约会,安排电话或几乎任何您需要的东西。

而已!

安装该库后,您可以添加Timedropper JS / CSS文件并使其运行。

这非常简单,您只需要jQuery库即可上手。

使用jQuery时间戳程序的自定义时间输入字段

确实具有可以添加其他(可选)功能的选项:

每个输入字段都必须由jQuery选择器作为目标 ,然后它会添加Timedropper输入字段。

  • 自动切换 -鼠标移动起来的时候会自动更改小时/分钟
  • 经络 –设定12小时制而非24小时制
  • 格式 –设置小时和分钟的显示方式(默认样式为下午1:22)
  • 鼠标滚轮 –允许根据滚轮时间更改时间
  • Init_animation –启用淡入淡出的动画效果
  • setCurrentTime –自动将当前时间添加到字段值

如果您更敢于冒险,则可以使用一些预先打包的主题来更改样式 ,甚至可以从头开始构建自己的主题。

它确实为任何应用提供了一个独特的界面来选择时间,而与设备无关。

在众多jQuery插件中,Timedropper是蜜蜂的膝盖。

这似乎是输入时间的一种明显方式,因此如果没有该功能,它可能会受到限制。

但是,我不喜欢缺少数字键盘支持

自然,它具有移动响应能力 ,因此也可以在智能手机和平板电脑上使用。

尽管如此,对于独特的界面简单的设置 ,我还是建议Timedropper给愿意尝试的人。

您可以在GitHub上免费找到所有源代码 并在下面的这支笔中找到一个非常简单的演示。

如果您有任何其他想法或建议,请随时在Twitter @felice_gattuso上与开发人员分享。


翻译自: https://www.hongkiat.com/blog/custom-time-input-fields-timedropper/