Have to click twice to fill the timepicker field

Question

I have a form that is validated by bootstrap form validation. Inside it, I have a timepicker text field:

    <div class="col-xs-12 col-sm-6 form-group">
        <h3>Meeting time:</h3>
        <input  type="text" name="meeting_time" id="meeting_time" class="form-control" required />
        <div class="help-block with-errors"></div>
    </div>

This is my jquery:

    $("#meeting_time).timepicker({
        timeFormat: ("H:mm"),
        minTime: "8:30",
        maxTime: "15:00"
    })

I click on it to select the value, but my Submit button doesn't look clickable. However, it is, and I can submit the form, but I still get error saying: Please fill out this field (since it's required).

If I click on it and select value TWICE, then it's all good. How can I fix it?

score 0 · Answer 1 · answered May 26 '16 at 13:43

I've worked around it. the change() is not triggered by the first click, so this is what worked for me:

    $(".ui-timepicker-container").click(function(){
        setTimeout(function(){$("#meeting_time").change();}, 1);
    });

Now the form is valid and Submit looks legit too.

Have to click twice to fill the timepicker field

1 Answers1