How to auto format clockpicker?

Question

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

Please read how you need to ask questions on SO. When jsFiddle provided, you need to add the code to your question. — vaso123, Mar 07 '16 at 10:18
And please provide what is the expected output format of the time? — vaso123, Mar 07 '16 at 10:19

score 2 · Accepted Answer · answered Mar 09 '16 at 13:03

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

score -1 · Answer 2 · answered Mar 07 '16 at 10:27

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/

How to auto format clockpicker?

2 Answers2

Linked