如何自动格式化时钟选择器？

Question

我正在使用 clockpicker(https://github.com/weareoutman/clockpicker)，我想在输入字段时自动格式化时间。

这里是 clockpicker 代码：

$('.container').each(function(){
    var clockpicker = $(this).find('input').clockpicker({
    autoclose: true,
    twelvehour:true,
    afterDone: function() {
        clockpicker.val(clockpicker.val().slice(0,-2)+' '+clockpicker.val().slice(-2));
    }
});

这是演示的 jsfiddle：http://jsfiddle.net/1e71occs/4/

例如jquery时间选择器提供了一个格式化选项。这是示例

的 link

预期输出

如果用户输入：

1234 => 12:34 AM
1234p => 12:34 PM

如何格式化在 clockpicker 中输入的时间？

谢谢

Answer 1

ClockPicker 最初是为 Bootstrap 设计的。所以 Bootstrap（和 jQuery）是唯一的依赖项。

因为它只使用了.popover和Bootstrap的一些.btn风格，所以我选择了这些风格来构建一个jQuery插件。对于非 bootstrap 项目，请随意使用 jquery-* 文件而不是 bootstrap-* 。

https://weareoutman.github.io/clockpicker/

Answer 2

Jquery 允许在每个元素上应用多个插件。

您可以同时使用 clockpicker 和 timepicker，如下所示

$('.container').each(function(){
     var clockpicker = $(this).find('input').clockpicker({
               autoclose: true,
               twelvehour:true,
               afterDone: function() {
                   clockpicker.val(clockpicker.val().slice(0,-2)+' '+clockpicker.val().slice(-2));
               }
     }).timepicker({dropdown:false,defaultTime:''});
});

如何自动格式化时钟选择器？

How to auto format clockpicker?

javascript

jquery

twitter-bootstrap-3

clockpicker