How to add separator between time and meridiem(AM?PM) in clockpicker?

Question

I am using clockpicker for time selection and in that I have used twelvehour:true parameter which displays time with AM/PM. Now the time display using it is like

11:55AM ==> 11:55 AM

whereas I want separator in between time and meridiem

So, there is an event beforeDone/afterDone but no example given so not getting how to use that event to change the value?

How can I separator between time and meridiem(AM?PM) in clockpicker? Thanks

Answer 1

Using afterDone looks like the easiest way to add the separator. It looks like afterDone is just a property you set when you make the input field a clockpicker (in the same place you tell it twelvehour:true). I found this page which was helpful in showing the events: https://weareoutman.github.io/clockpicker/jquery.html

I made this jsfiddle for you http://jsfiddle.net/1e71occs/4/. The JavaScript code is:

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

  // Manual operations
    $(this).find('.button-a').click(function(e){
    // Have to stop propagation here
        e.stopPropagation();
        clockpicker.clockpicker('show').clockpicker('toggleView', 'minutes');
    });
    $(this).find('.button-b').click(function(e){
    // Have to stop propagation here
        e.stopPropagation();
        clockpicker.clockpicker('show').clockpicker('toggleView', 'hours');
    });

});

I had to do the var clockpicker = bit to get a reference to the clockpicker so I could change its value to include the seperator. I tried using $(this).val() but it seems to refer to the $(window).