如何根据datepicker选中的开始日期自动设置结束日期为往后1年

架构老林

2026-9-27

实现方案

现有代码仅实现了将结束日期赋值为和开始日期相同的效果，调整代码完成加1年的逻辑即可，方案如下：

首先读取用户选中的开始日期，转换为Date对象，原生Date会自动处理闰年、月末日期溢出等特殊场景（比如2月29日加1年会自动转为2月28日）
对日期的年份执行+1操作后，格式化为datepicker组件要求的字符串格式赋值给结束日期组件即可

通用版本（适配绝大多数原生/第三方datepicker）

$("#startDate").on("change", function (e) {
  const startVal = $(this).val();
  // 开始日期为空时同步清空结束日期
  if (!startVal) {
    $("#endDate").val('');
    return;
  }
  const startDate = new Date(startVal);
  // 计算加1年后的日期
  const endDate = new Date(startDate);
  endDate.setFullYear(startDate.getFullYear() + 1);
  
  // 这里默认输出YYYY-MM-DD格式，和大多数datepicker默认格式匹配，如果你用自定义格式可自行调整格式化逻辑
  const formattedEnd = endDate.toISOString().split('T')[0];
  $("#endDate").val(formattedEnd);
});

jQuery UI Datepicker专属优化版本

如果你用的是jQuery UI的datepicker组件，直接调用其内置API可以避免格式转换出错：

$("#startDate").on("change", function () {
  const startDate = $(this).datepicker('getDate');
  if (startDate) {
    const endDate = new Date(startDate);
    endDate.setFullYear(startDate.getFullYear() + 1);
    $("#endDate").datepicker('setDate', endDate);
  } else {
    $("#endDate").datepicker('setDate', null);
  }
});