How to auto format clockpicker?

问题

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

回答1:

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

回答2:

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).

Since it only used .popover and some of .btn styles of Bootstrap, I picked these styles to build a jQuery plugin. Feel free to use jquery-* files instead of bootstrap-* , for non-bootstrap project.

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

来源：https://stackoverflow.com/questions/35841066/how-to-auto-format-clockpicker

标签

javascript

jquery

twitter-bootstrap-3

clockpicker