如何在jQuery Datepicker多月份视图中获取当前活动日期范围？

如果你在使用jQuery Datepicker的多月份视图时，需要获取当前界面显示的日期范围（或选中的日期范围），可以按照下面的方法来实现：

1. 基础准备 #

首先确保你引入了必要的依赖文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="calendar"></div>

然后初始化多月份视图的Datepicker：

$(function() {
  $('#calendar').datepicker({
    numberOfMonths: [1, 2], // 配置为1行2列的双月份视图
    showButtonPanel: true
  });
});

2. 获取视图显示的完整日期范围（含填充日期） #

这个方法会获取当前日历视图中显示的第一个日期到最后一个日期，包括为填满日历格子而显示的前后月份填充日期：

function getVisibleDateRange($picker) {
  // 获取Datepicker的实例对象
  const inst = $picker.datepicker('getInst');
  const firstDayOfWeek = inst.firstDay; // 一周的起始日，默认0为周日
  const firstDisplayedMonth = inst.drawMonth;
  const firstDisplayedYear = inst.drawYear;
  
  // 计算视图显示的第一个日期
  const firstMonthFirstDay = new Date(firstDisplayedYear, firstDisplayedMonth, 1);
  const daysToFirstDisplayedDay = (firstMonthFirstDay.getDay() - firstDayOfWeek + 7) % 7;
  const startDate = new Date(firstMonthFirstDay);
  startDate.setDate(startDate.getDate() - daysToFirstDisplayedDay);
  
  // 计算视图显示的最后一个日期
  const totalMonths = typeof inst.settings.numberOfMonths === 'number' 
    ? inst.settings.numberOfMonths 
    : inst.settings.numberOfMonths[0] * inst.settings.numberOfMonths[1];
  const lastMonthLastDay = new Date(firstDisplayedYear, firstDisplayedMonth + totalMonths, 0);
  const daysToLastDisplayedDay = (firstDayOfWeek - lastMonthLastDay.getDay() + 7) % 7;
  const endDate = new Date(lastMonthLastDay);
  endDate.setDate(endDate.getDate() + daysToLastDisplayedDay);
  
  // 格式化为你需要的字符串形式（比如"January 31"）
  return {
    start: startDate,
    end: endDate,
    formattedStart: $.datepicker.formatDate('MM dd', startDate),
    formattedEnd: $.datepicker.formatDate('MM dd', endDate)
  };
}

你可以在日历视图切换时调用这个函数，比如：

$('#calendar').on('changeMonth', function() {
  const range = getVisibleDateRange($(this));
  console.log('当前视图显示的日期范围：', range.formattedStart, '→', range.formattedEnd);
});

3. 获取选中的日期范围（若启用范围选择） #

如果你的Datepicker用于范围选择（用户选择起始和结束日期），可以通过扩展Datepicker实现，然后获取选中的两个日期：

// 扩展Datepicker支持范围选择
$(function() {
  let startDate;
  $('#calendar').datepicker({
    numberOfMonths: [1, 2],
    onSelect: function(dateText) {
      if (!startDate) {
        startDate = dateText;
        alert('请选择结束日期');
      } else {
        const endDate = dateText;
        // 格式化日期为目标格式
        const formattedStart = $.datepicker.formatDate('MM dd', $.datepicker.parseDate($.datepicker._defaults.dateFormat, startDate));
        const formattedEnd = $.datepicker.formatDate('MM dd', $.datepicker.parseDate($.datepicker._defaults.dateFormat, endDate));
        console.log('选中的日期范围：', formattedStart, '→', formattedEnd);
        startDate = null; // 重置起始日期，方便下次选择
      }
    }
  });
});

这样当用户先后选中两个日期后，就能得到类似January 31和February 3的结果啦。

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