1

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

Bhumi Shah
  • 9,323
  • 7
  • 63
  • 104

2 Answers2

2

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).

Ben
  • 2,143
  • 2
  • 19
  • 27
  • i have around 6 input field so i have used class var input = $('.input-a') so it is not working for all input. – Bhumi Shah Mar 07 '16 at 04:49
  • Ahh, for multiple fields I would use jQuery each(). I updated the code above and the jsfiddle. Basically I have moved everything inside an each function that loops over some higher level container (.container). Then on each loop, the clockpicker is set up and the buttons have their events bound. If you're not using buttons, you /could/ loop over the inputs directly. e.g. $('input').each(function(){ var clockpicker = $(this).clockpicker({.... – Ben Mar 07 '16 at 05:18
  • can I use it common for any input? Also can you update fiddle? Thanks – Bhumi Shah Mar 07 '16 at 07:03
  • Ahh, you've updated fiddle already.Awesome, It is working. Thanks :). – Bhumi Shah Mar 07 '16 at 07:09
  • You're welcome. If you need me to explain any more of the code, just let me know. – Ben Mar 07 '16 at 23:31
0

I added this as an option, along with several more involving twelve hour time here: https://github.com/diracleo/bootstrap-clockpicker

Dane Iracleous
  • 1,659
  • 2
  • 16
  • 35