移动端t-datepicker日期范围选择器选日后跳回当月问题修复

问题复现说明 #

• 涉及组件：t-datepicker 日期范围选择组件
• 复现场景：移动端访问项目页面，点击「出发」日期选择入口唤起日历，选中任意非当前自然月的日期后，日历视图会自动跳转回当前月份，无法停留在所选日期所属月份

问题根因 #

组件内置的日期选中回调逻辑有缺陷：每次触发选中事件重绘日历时，默认读取系统当前年月作为面板渲染基准，没有持久化已选中日期对应的月份状态，移动端适配分支下该问题必现。

修复方案 #

方案1：不改组件源码，通过初始化配置修复 #

在原有t-datepicker初始化参数里补充onSelect回调，选中日期后主动把面板定位到选中日期所在月份，覆盖组件默认的错误跳转逻辑，示例代码如下：

// 日期选择器初始化
$('#departureDate').tDatePicker({
  // 保留项目里原有的所有配置项，比如日期格式、可选范围、周起始日等
  autoClose: false,
  dateRangesHover: true,
  // 新增以下回调逻辑
  onSelect: function (formattedVal, selectedDate, instance) {
    // 读取选中日期的年、月
    const targetYear = selectedDate.getFullYear();
    const targetMonth = selectedDate.getMonth();
    // 主动设置日历面板展示月份，第三个参数传false表示不需要触发额外重绘事件
    instance.setActiveMonth(targetMonth, targetYear, false);
  }
});

如果是双日期范围选择场景（同时选出发、返程日期），判断最后一次操作选中的日期对象，取其年月传入setActiveMonth方法即可，逻辑完全一致。

方案2：修改组件源码彻底修复 #

如果项目是本地引入组件源码而非CDN引入，可以直接改组件内部逻辑彻底解决问题：

1. 找到组件源码中_selectDay方法的实现，定位到选中日期后重置面板月份的代码段，不同版本行号略有差异，错误逻辑大致如下：

// 组件原有错误逻辑
this.setActiveMonth(new Date().getMonth(), new Date().getFullYear());

2. 把上述代码替换为读取选中日期年月的逻辑：

// 替换后的正确逻辑
const activeDate = this._getSelectedDate() || new Date();
this.setActiveMonth(activeDate.getMonth(), activeDate.getFullYear());

3. 保存修改后刷新页面验证即可，该修改不会影响组件其他原有功能。

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