Skip to content

Datepicker flashes and disappears after field receives focus

I have an html page that displays a modal dialog with two jquery datepicker fields. When the dialog is instantiated, the cursor is properly placed in the first datepicker field and the calendar is displayed.

Upon selection of a date, focus is moved to the second datepicker field. The calendar flashes but disappears.

How do I correct this?

The code is below. I have added no html formatting, so when the code runs it will be ugly. Pick a date and you will see the date picker calendar, for the to date field, display and disappear.

Any help would be greatly appreciated.

<!-- Javascript -->
<script src=""></script>
<script src=""></script>

<script src="//"></script>
<script src="./javascript/jquery-ui.min.js"></script>

<!-- include needed javascript libraries -->
<script defer src="./javascript/"></script>

<!-- main script -->
<script defer>

$(document).ready(function() {
    // set start and end dates to read only
    $('#fromdate').prop('readonly', true);
    $('#todate').prop('readonly', true);
    // display the dialog to enter the date range   
    $("#mtg_dialog").dialog({modal:true, draggable:false, resizable:false});
    // process the selection of the from date
    $('#fromdate').on('change', function() {
        if ($('#fromdate').datepicker('getDate') != null) {
    // input button
    $('input[type=button]').hover(function() {
    // place the cursor in the from date field
    Run Report Button
    $('#run_btn').on('click', function() {
        console.log('run report');


<!-- HTML -->
<div id="mtg_dialog" style="display:none">
            <input type="datepicker" placeholder="from date" id="fromdate" tabindex="1"/>
            <input type="datepicker" placeholder="to date" id="todate" tabindex="2"/>
            <input type="button" value="Run" id="run_btn" tabindex="3"/>
            <input type="button" value="Cancel" id="cancel_btn" tabindex="4"/>


you can fix it by delaying the focus event like this:

setTimeout(() => $('#todate').focus());