如何将日期选择器分成三个月的网格？

Question

$('#calendar').datepicker({
  numberOfMonths: 12,
  minDate: new Date(2021, 1 - 1, 1),
  maxDate: new Date(2021, 12 - 1, 31),
  showButtonPanel: true,
});

<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>

<div class="container">
  <div id='calendar'></div>
</div>

这会在一行中显示所有月份。

如何将日期选择器分解为 3×4 网格，例如这个布局：

Jan Feb Mar
Apr May Jun
Jul Aug Sep
Oct Nov Dec

我尝试添加多个日期选择器，但没有用。

Answer 1

如何使用numberOfMonths必须是一个数组而不是一个整数才能达到想要的布局。

来自日期选择器文档：

因此，根据该信息，将 numberOfMonths 与行值和列值数组一起使用以获得所需的 grid/matrix。

$('#calendar').datepicker({
  numberOfMonths: [4, 3], // 4 rows, 3 columns
  minDate: new Date(2021, 1 - 1, 1),
  maxDate: new Date(2021, 12 - 1, 31),
  showButtonPanel: true,
});

<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>

<div class="container">
  <div id='calendar'></div>
</div>

如何将日期选择器分成三个月的网格？

How to break datepicker into a three three month grid?

javascript

jquery

jquery-ui-datepicker