Search code examples
jqueryhtmltimepicker

jQuery Timepicker - prevent pop-up when field is readonly

I have this code...

HTML

<input name="start_time" id="start_time" type="text" value="" readonly >

JQuery

$('#start_time').timepicker({
    showPeriodLabels: true,
    minutes: {
        starts: 0,
        ends: 59,
        interval: 1,
        manual: []
    }
});

Display

enter image description here

Problem:

- Timepicker still pops-up considering the field is 'readonly'.
- How can I prevent this?
- Any other work around?

Thank you guys for all the help!

Solution

  • You can check before that your input box have readonly property or not then apply the timepicker on that. Go with the link or below code. Hope my code helps you to understand better.

    JSFiddle

    HTML Code-

    <input name="start_time" id="start_time" type="text" value="" readonly >

    JAVASCRIPT Code-

    if(!$('#start_time').prop('readonly')){
  $('#start_time').timepicker({
      showPeriodLabels: true,
      minutes: {
          starts: 0,
          ends: 59,
          interval: 1,
          manual: []
      }
  }); 
}