jQuery UI Datepicker：如何让日历与输入框宽度保持一致？

我之前也踩过这个坑！jQuery UI Datepicker在切换月份/年份时，会完全重新生成#ui-datepicker-div内部的DOM结构，这就是你设置的宽度被重置的核心原因——你的onChangeMonthYear回调执行时机太早了，在日历完成重新渲染前就设置了宽度，后续的渲染操作直接覆盖了你的设置。

下面给你两个靠谱的解决方案：

方案一：延迟执行宽度设置（JS动态调整） #

利用setTimeout把宽度设置代码放到下一个事件循环，让日历先完成渲染再调整宽度，同时加上初始化时的宽度设置：

$(function(){
  $('#thedate').datepicker({
    dateFormat: 'dd-mm-yy', // 补全你的dateFormat配置
    // 初始化日历前先设置匹配宽度
    beforeShow: function() {
      $('#ui-datepicker-div').outerWidth($('#thedate').outerWidth());
    },
    // 切换月份后延迟执行宽度设置，避开DOM重渲染的覆盖
    onChangeMonthYear: function(year, month, inst) {
      setTimeout(function() {
        $('#ui-datepicker-div').outerWidth($('#thedate').outerWidth());
      }, 10); // 10ms足够让日历完成渲染，不用设置太长
    }
  });
});

方案二：用CSS强制匹配宽度（更稳定） #

如果不想依赖JS的执行时机，直接用CSS强制日历宽度和输入框一致会更可靠。如果页面有多个Datepicker，建议把日历附加到输入框的父容器，避免影响其他日历：

第一步：修改JS，将日历附加到输入框的父容器 #

$(function(){
  $('#thedate').datepicker({
    dateFormat: 'dd-mm-yy',
    appendTo: '.box' // 将日历附加到输入框的父div.box中
  });
});

第二步：添加CSS样式 #

/* 让日历继承父容器的宽度，确保和输入框一致 */
.box .ui-datepicker {
  width: 100% !important;
  max-width: inherit !important;
  box-sizing: border-box; /* 避免内边距撑宽日历 */
}

这个方案的好处是从样式层面直接控制，不用依赖JS的执行时机，稳定性更高。

内容的提问来源于stack exchange，提问作者RhymeGuy