Jquery pickatime, Drop down window not closing after on change event

Question

I am using JQuery Time picker. On selection of time, the dop-down window which displays the time has to close, but it doesnot.

<h:inputText id="selectTime" value="00:00" />

$('#selectTime').pickatime({
    format: 'HH:i',
    disable: [
        [0, 0]
    ]
})
$('#selectTime').on('change', function() {
    $(this).hide();
})

For the above on change event, the input text gets hide but not the Time Picker Drop down. I understad, as I am using this, it will hide the text box. But what is the correct way to clode the Time Picker after time is being selected.

You need to give us a complete example, because somewhere in your code you broke the default behavior, which is to close the dialog after the user picked a time. — Kijewski, May 12 '15 at 21:03
would need a jsfiddle or something for this. But also make sure somewhere you did not set `closeOnSelect` to false — BillPull, May 12 '15 at 21:06
http://amsul.ca/pickadate.js/time/ , this is the time picker I am referring to. — ashlesha, May 13 '15 at 15:38
BillPull, when you say closeOnSelect to false , I am not sure if this is overriden somewhere, But if I want to override it, Shall I include that in "$('#selectTime').pickatime({" — ashlesha, May 13 '15 at 15:40

score 0 · Answer 1 · answered Aug 04 '16 at 16:40

Maybe your input element falls within label element. You must use a container to separate events of picker root element into label events.

Create a blank div with sample id "root-picker-outlet":

<div id="root-picker-outlet"></div>

Initialize picker:

$('.timepicker').pickatime({
  container: '#root-picker-outlet'
})

score 0 · Answer 2 · answered Aug 04 '16 at 16:44

I was running with same kind of issue for jQuery custom combobox and fixed like this:

$('#selectTime').pickatime({
   format: 'HH:i',
   disable: [ [0, 0] ]
})

$('#selectTime').on('change', function() {
   $(".ui-menu").css('display', 'none');
   //hide the menu according to your dropdown locator in css
})

Meanwhile you have to add method for keyboard enter as well to hide menu for e.g.

$('#selectTime').keypress(function(event) {
   if (event.which == 13) {
     $(".ui-menu").css('display', 'none');
     //hide the menu according to your dropdown locator in css
   }
})

Jquery pickatime, Drop down window not closing after on change event

2 Answers2