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

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>

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

如何将datepicker分解为3乘4的网格，例如：

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

我尝试添加多个日期选择器，但这不起作用。

Answer 1

如何使用< code>numberOfMonths必须是一个数组，而不是一个整数，以实现所需的布局。

来自datepicker文档：

因此，基于这些信息，使用< code>numberOfMonths和一组行和列值来获得所需的网格/矩阵。

$('#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>