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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./javascript/jquery-ui.min.js"></script> <!-- include needed javascript libraries --> <script defer src="./javascript/jquery.ba-throttle-debounce.min.js"></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 $("#fromdate").datepicker(); $("#todate").datepicker(); $("#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) { $('#todate').focus(); } }); // input button $('input[type=button]').hover(function() { $(this).toggleClass('ui-state-hover'); }); // place the cursor in the from date field $("#fromdate").focus(); /* Run Report Button */ $('#run_btn').on('click', function() { console.log('run report'); }); }); </script> <!-- HTML --> <div id="mtg_dialog" style="display:none"> <div> <div> <input type="datepicker" placeholder="from date" id="fromdate" tabindex="1"/> <br> <br> <input type="datepicker" placeholder="to date" id="todate" tabindex="2"/> </div> <br> <br> <div> <input type="button" value="Run" id="run_btn" tabindex="3"/> </div> <input type="button" value="Cancel" id="cancel_btn" tabindex="4"/> </div> </div> </div>
Advertisement
Answer
you can fix it by delaying the focus event like this:
setTimeout(() => $('#todate').focus());