Sherry
Sherry

Reputation: 269

Bootstrap Timepicker Not Hide?

I am using bootstrap timepicker but it is not hiding when I use tab. It only hides on click. On focus by using tab timepicker open but on lost focus tab timepicker not close.

Below is my code

 $('#frmtime').timepicker({
        defaulttime: false

    }).on('changeTime.timepicker', function (e) {
        disableFocus: true;
        alert('The time is ' + e.time.value);
        $(this).timepicker('hide'); 

    });

How can I hide the timepicker on change event.

Upvotes: 4

Views: 2016

Answers (2)

fswd
fswd

Reputation: 353

A solution that worked for me.

$('#frmtime').on('keydown', function(e) {
    if(e.keyCode == 9) {
        $(this).timepicker('hideWidget');
    }
});

Upvotes: 2

Kaiyu Lee
Kaiyu Lee

Reputation: 643

Yes,I have this problem too. after trying many ways, I fixed this by code like this:

$('.tp-start, .tp-end')
.on('focus', function() {
      $(this).timepicker({
          defaultTime: false,
          minuteStep: 1,
          showMeridian: false
      });
})
// EDIT:
.on('blur', function(e) {
    if ($(e.target).hasClass('tp-start') || $(e.target).hasClass('tp-end')) {
        // do nothing or other thing you wanna do.
    } else {
       $(this).timepicker('hideWidget');
    }
});

//.tp-start, .tp-end are inputs of time-start & time-end

It's more concise!

Upvotes: 0

Related Questions