Question

我有一个 html 页面，它显示一个带有两个 jquery datepicker 字段的模式对话框。当对话框被实例化时，光标被正确放置在第一个日期选择器字段中并显示日历。

选择日期后，焦点将移至第二个日期选择器字段。日历闪烁但消失。

我该如何纠正？

代码如下。我没有添加 html 格式，所以当代码运行时它会很难看。选择一个日期，您将看到日期选择器日历，对于截止日期字段，显示和消失。

任何帮助将不胜感激。

<!-- 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>

Answer 1

您可以通过像这样延迟焦点事件来修复它：

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

字段获得焦点后日期选择器闪烁并消失

1 个答案: