jQuery Datepicker排版异常：日期超出日历框架如何修复？

问题说明 #

使用标准jQuery Datepicker时，出现日期完全超出日历框架的异常（表现为日期单元格宽度异常，内容溢出到框架外），已引入样式：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel='stylesheet'>

修复步骤 #

• 排查样式冲突
  页面自定义CSS或其他框架（如Bootstrap）的全局样式可能打乱了Datepicker的布局，比如全局table/td/th设置了过大的padding、固定width或者错误的box-sizing。可以用优先级更高的CSS覆盖：

  .ui-datepicker table td, .ui-datepicker table th {
    box-sizing: border-box;
    padding: 4px;
    width: auto;
  }
  

• 核对版本兼容性
  确保jQuery核心版本与jQuery UI 1.12.1兼容（适配范围：jQuery 1.8.x ~ 3.x），版本不匹配会导致渲染异常。
• 隔离DOM干扰
  父容器的overflow或定位属性可能影响Datepicker渲染，把绑定Datepicker的输入框放到干净容器中测试：

  <div class="datepicker-wrap">
    <input type="text" id="datepicker">
  </div>
  

  给容器加基础样式：

  .datepicker-wrap {
    position: relative;
    z-index: 9999;
  }
  

• 确保样式完整加载
  CDN可能出现样式加载不完整的情况，建议下载jQuery UI 1.12.1 base主题的本地样式文件，替换CDN链接。
• 强制设置单元格布局
  针对单元格宽度异常的问题，强制设置表格和单元格的宽度规则：

  .ui-datepicker table {
    width: 100%;
    table-layout: fixed;
  }
  .ui-datepicker td {
    width: 14.28%; /* 7列平均分配宽度 */
    text-align: center;
  }
  

验证方法 #

修改后刷新页面，打开Datepicker检查日期是否正常显示在框架内。若仍有问题，用浏览器F12开发者工具查看Datepicker元素的样式，定位被异常覆盖的属性后针对性调整。

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