如何自动格式化clockpicker?

时间:2016-03-07 10:16:53

标签: javascript jquery twitter-bootstrap-3 clockpicker

我正在使用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中格式化输入的时间?

由于

2 个答案:

答案 0 :(得分:1)

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:''});
});

答案 1 :(得分:-1)

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

由于它只使用.popover和一些.btn样式的Bootstrap,我选择了这些样式来构建一个jQuery插件。对于非引导项目,请随意使用jquery- *文件而不是bootstrap- *。

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