本文介绍在 air-datepicker（v3.5.0+）中通过 fixedHeight: true 选项解决因月份天数差异导致下拉日历高度跳变的问题，并提供安装未发布版本、CSS 备选方案及使用注意事项。
本文介绍在 air-datepicker（v3.5.0+）中通过 `fixedheight: true` 选项解决因月份天数差异导致下拉日历高度跳变的问题，并提供安装未发布版本、css 备选方案及使用注意事项。
air-datepicker 是一款轻量、可定制的 JavaScript 日期选择器，但在默认行为下，当用户切换月份或年份时，日历网格因行数变化（如 5 行 vs 6 行）而动态调整高度——尤其当弹出层定位在输入框上方时，这种“抖动”会严重影响用户体验。
幸运的是，社区已为此需求新增了原生支持：fixedHeight 配置项。该功能于 v3.5.0 分支中正式引入，但截至当前（2024 年），该版本尚未发布至 npm 官方仓库。因此，需通过 GitHub 直接安装：
npm install t1m0n/air-datepicker#v3.5.0 # 或使用 yarn yarn add t1m0n/air-datepicker#v3.5.0
安装后，在初始化时启用即可：
$('#date-input').datepicker({
fixedHeight: true, // ✅ 关键配置：强制日历容器保持固定高度
position: 'top left', // 若定位在上方，此选项尤为重要
// 其他配置...
});? 原理说明：启用
fixedHeight后，插件会自动计算并应用一个足以容纳最多 6 周（即 42 天）的日历容器最小高度（通常为320px左右），并通过min-height和overflow: hidden确保视觉一致性，避免重排抖动。
⚠️ 注意事项：
- 该版本仍处于预发布阶段，请在生产环境上线前充分测试兼容性（尤其是与 jQuery 版本、自定义主题或事件监听器的协同）；
-
package-lock.json中将记录 GitHub 提交哈希（而非语义化版本号），建议后续升级至正式版时及时替换为npm install air-datepicker@^3.5.0； - 若暂无法引入未发布版本，可采用 CSS 临时兜底（不推荐长期使用）：
.air-datepicker .datepicker--body {
min-height: 320px !important;
display: flex;
flex-direction: column;
}
.air-datepicker .datepicker--days .datepicker--days-names,
.air-datepicker .datepicker--days .datepicker--cells {
flex: 1;
}但需注意：纯 CSS 方案可能影响响应式布局或滚动行为，且无法保证跨浏览器一致性。
总结而言，fixedHeight: true 是解决 air-datepicker 高度跳变问题最简洁、可靠的方式。建议优先采用官方分支安装，并关注 v3.5.0 正式发布动态，以便及时迁移到稳定版依赖。
