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

问题描述

我正在使用Clockpicker( https://github.com/weareoutman/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时间选择器提供了格式化选项.这是示例的链接 >

预期产量

如果用户输入:

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

如何格式化时钟选择器中输入的时间?

谢谢

解决方案

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

I am using clockpicker(https://github.com/weareoutman/clockpicker) and I want to auto format time when type input field.

Here is the clockpicker code:

$('.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));
    }
});

This is the jsfiddle for demo: http://jsfiddle.net/1e71occs/4/

For example jquery time picker provide an option to format. Here is the link of example

Expected OUTPUT

if user enter:

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

How can I format entered time in clockpicker?

Thanks

解决方案

Jquery allows to apply multiple plugins on each element.

You can use both clockpicker and timepicker as below

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

这篇关于如何自动格式化时钟选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！