Question

我一直在寻找一种javascript解决方案，可以在所有浏览器上重新创建<input type="time" />行为，例如Google Chrome浏览器会自动执行此操作。

基本上，我需要这些字段：

<input type="time" />
<input time="text" class="timefield" />

在chrome中的表现几乎相同。（我不需要按钮）

有没有人知道一个涵盖这个的javascript？我真的希望已经有一个开源解决方案（或类似的东西），但我根本找不到任何东西。

这是我到目前为止重新创建Google Chrome时间字段所做的工作：

我发现这个有用的插件涵盖了基础知识：https://igorescobar.github.io/jQuery-Mask-Plugin/ 它选择焦点上的输入，只接受数字并将它们自动格式化为一段时间。所以这就是我能得到的：

 $('.timefield').attr('pattern', '^([01][0-9]|2[0-3]):([0-5][0-9])$');
  $('.timefield').mask("20:50", {
    placeholder: "--:--", 
    selectOnFocus: true, 
    translation: {
      2: {pattern: /[0-2]/},
      5: {pattern: /[0-5]/}
    }
  });

我仍然缺少重要细节：

输入小时数从右到左开始
任何大于2的小时都会让焦点跳到分钟
选择焦点小时和分钟的文本选择

我不知道如何实现这些功能。有人知道我将如何开始吗？

Answer 1

我建议使用引导日期选择器，它很容易包含在您的项目中，易于使用，您可以将其修改为时间戳。我使用以下链接来完成此任务：

http://bootstrap-datepicker.readthedocs.io/en/latest/

https://eonasdan.github.io/bootstrap-datetimepicker/

输入类型的JS解决方案= Chrome时间

1 个答案: