修改 Datepicker 关闭动画

Question

当日期选择器打开时，我希望它是 same width as the associated input text box。当日期选择器关闭时，我希望它一次关闭。但是，一旦我选择了一个开始日期和结束日期，日期选择器就不再一次关闭。

我尝试了诸如inst.dpDiv.outerWidth(0) 之类的想法，并部分修改了https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css 此处的代码。但是没有任何效果，现在我感觉自己在兜圈子。

我打算包含一个 JSFiddle，但由于在 Sublime 和 JSFiddle 中运行代码之间存在差异，我决定不包含。而且由于问题仅在屏幕上显示一秒钟（或更短时间），我无法截取屏幕截图。

我已经努力只在下面包含相关代码。有人有什么建议吗？

更新 - 感谢 Ghassen Louhaichi 的编辑，在下面的 sn-p 中你可以看到我所说的口吃。

$(function() {
    from = $('#arrivalDate').datepicker({
        beforeShow: function(input, inst) {
            setTimeout(function() {
                inst.dpDiv.outerWidth($('#arrivalDate').outerWidth());
            }, 0);
        },
        onClose: function() {
            if ($('#arrivalDate').datepicker('getDate') != null) {
                if ($('#departureDate').datepicker('getDate') == null) {
                    jQuery('#departureDate').datepicker('show');
                }
            }
        }
    })
    .on('change', function(input, inst) {
        to.datepicker('option', 'minDate', $('#arrivalDate').datepicker('getDate'));
    });

    to = $('#departureDate').datepicker({
        beforeShow: function(input, inst) {
            setTimeout(function() {
                inst.dpDiv.outerWidth($('#departureDate').outerWidth());
            }, 0);
        },
        onClose: function() {
            if ($('#departureDate').datepicker('getDate') != null) {
                if ($('#arrivalDate').datepicker('getDate') == null) {
                    jQuery('#arrivalDate').datepicker('show');
                }
            }
        }
    })
    .on('change', function(input, inst) {
        from.datepicker('option', 'maxDate', $('#departureDate').datepicker('getDate'));
    });
    
    $('div.ui-datepicker').on('click', function() {
        $(this).outerWidth($('#arrivalDate').outerWidth());
    });
});

input {
  width: 50%;
  height: 50px
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="box"><input id="arrivalDate" type="text" /></div>
<div class="box"><input id="departureDate" type="text" /></div>

Answer 1

在jquery-ui.js 文件中，我需要更改

// inst.dpDiv.removeClass( "ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4" ).width( "" );

到

inst.dpDiv.removeClass( "ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4" );