We are using Bootstrap timepicker which can we be found here

Now we are using it like this $('#timepicker1').timepicker();

So it is showing timepicker in this way

Now we have some dependencies on the time format So what we want is the hour part in the if it has value in single digit suppose 8 So it should display as 08.

I am looking at the framework options but didn't find any.

We are using Bootstrap timepicker which can we be found here

Now we are using it like this $('#timepicker1').timepicker();

So it is showing timepicker in this way

Now we have some dependencies on the time format So what we want is the hour part in the if it has value in single digit suppose 8 So it should display as 08.

I am looking at the framework options but didn't find any.

• javascript
• jquery
• twitter-bootstrap
• timepicker

• Looking at the docs, I would say that this is not possible natively. You could however fork the project and include the feature by yourself – Donald Supertramp Commented Feb 10, 2015 at 10:25
• @DonaldSupertramp Thanks Donald but I don't have that much of time. – Nikhil Agrawal Commented Feb 10, 2015 at 10:26
• Looks like there is a way though to monkey-patch plugin. – dfsq Commented Feb 10, 2015 at 10:29
• @dfsq monkey-patch plugin???? – Nikhil Agrawal Commented Feb 10, 2015 at 10:30
• Sure why not, it doesn't affect original source code it case later you update to newer version. – dfsq Commented Feb 10, 2015 at 10:32

5 Answers 5

$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
    var hours=e.time.hours, //Returns a string
        min=e.time.minutes,
        merdian=e.time.meridian; 

    if(hours.length==1){
        $('#timepicker1').timepicker('setTime', '0'+hours+':'+min+' '+merdian);

}

I think this should help. :)

Hope I am not too late. Try using the TimePicker's change method:

$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
    var timePicked = $('#timepicker1').val();

    if(timePicked.length < 8)   
        $('#timepicker1').val("0" + timePicked);
});

I've looked at it, as that particular picker is no longer maintained and doesn't have the functionality you seek it looks like you are going to have to fork the project and get your hands dirty implementing the styling. Or use another picker.

Personally I'd timebox this to say 1 hour and see if you can get it done if you are short of time, otherwise use another ponent.

$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
    var hours=e.time.hours, //Returns an integer
        min=e.time.minutes,
        merdian=e.time.meridian;
    if(hours < 10) {
        $(e.currentTarget).val('0' + hours + ':' + min+' '+merdian);
    }
});

I had the same issue. But I have created a code for time picker. I will be very helpful for multiple time picker also.

This code works for 01:00:00 that means H:i:s

$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
    let timePicked = $(this).val();
    (timePicked.length < 8) ? $(this).val("0" + timePicked) : '';
});

This code works for only H:i

$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
        let timePicked = $(this).val();
        (timePicked.length < 5) ? $(this).val("0" + timePicked) : '';
    });