Как автоматически отформатировать часы?

Question

Я использую 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

Как я могу отформатировать введенное время в Clockpicker?

Спасибо

Answer 1

Jquery позволяет применять несколько плагинов для каждого элемента.

Вы можете использовать как часы, так и часы, как показано ниже

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

Answer 2

ClockPicker был разработан для Bootstrap в начале. Таким образом, Bootstrap (и jQuery) являются единственными зависимостями.

Поскольку он использовал только.popover и некоторые стили.btn Bootstrap, я выбрал эти стили для создания плагина jQuery. Не стесняйтесь использовать файлы jquery-* вместо bootstrap-*, ​​для не-начальной загрузки проекта.

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