如何将jQuery UI datepicker的12个月展示拆分为3列4行的网格

你不需要创建多个datepicker实例，仅需修改原有配置即可实现需求：

• 核心修改：jQuery UI datepicker的numberOfMonths参数支持传入二维数组[行数, 列数]，将原有numberOfMonths: 12修改为numberOfMonths: [4, 3]即可自动按4行3列排列12个月份，排列顺序完全符合你要求的按月从左到右、从上到下排布。
• 可选优化：添加少量CSS调整布局宽度，避免月份拥挤变形。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<style>
.container {
  width: 980px;
  margin: 20px auto;
}
/* 调整月份宽度和间距，适配3列布局 */
.ui-datepicker-group {
  width: 32% !important;
  margin-right: 2% !important;
  margin-bottom: 15px !important;
}
.ui-datepicker-group:nth-child(3n) {
  margin-right: 0 !important;
}
</style>
</head>
<body>
<div class="container">
  <div id='calendar'></div>
</div>
<script>
$('#calendar').datepicker({
  numberOfMonths: [4, 3],
  minDate: new Date(2021, 0, 1),
  maxDate: new Date(2021, 11, 31),
  showButtonPanel: true,
});
</script>
</body>
</html>

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