表单提交出错后治疗与交付日期Datepicker范围失效求助

问题分析 #

你当前的代码只在校准日期被用户手动选择时，才会触发changeDate事件来设置治疗日期、交付日期的可选范围。但表单提交出错回显时，校准日期是直接赋值初始化的，这个过程不会触发changeDate事件，导致另外两个日期选择器的范围没有被重新设置，所以会显示所有日期可选。

解决方案 #

把设置日期范围的逻辑抽成独立函数，这样既能在用户手动选择校准日期时调用，也能在页面初始化（包括表单错误回显）时，根据已有的校准日期值来调用，确保范围始终正确。

修改后的代码 #

// 提取设置日期范围的独立函数
function updateDateRanges(calibrationDate) {
  const tempDate = new Date(calibrationDate.valueOf());
  tempDate.setDate(tempDate.getDate() - 5);
  
  const tempDateOne = new Date(calibrationDate.valueOf());
  tempDateOne.setDate(tempDateOne.getDate() + 1);
  
  const tempDateDel = new Date(calibrationDate.valueOf());
  tempDateDel.setDate(tempDateDel.getDate() - 1);

  const minTreatmentDate = new Date(tempDate);
  const maxTreatmentDate = new Date(tempDateOne);
  const maxDeliveryDate = new Date(tempDateDel);

  $('#cal-treatmentDate1').datepicker('setStartDate', minTreatmentDate);
  $('#cal-treatmentDate1').datepicker('setEndDate', maxTreatmentDate);
               
  $('#cal-deliveryDate-req').datepicker('setStartDate', minTreatmentDate);
  $('#cal-deliveryDate-req').datepicker('setEndDate', maxDeliveryDate);
}

// 初始化校准日期Datepicker
var tempDate = new Date();
$('#cal-calibrationDate-req').datepicker({
  startDate: FromStartDate,
  daysOfWeekDisabled: "2,6,0,1",
  autoclose: true,
}).on('changeDate', function (selected) {
  // 用户手动选择时调用函数
  updateDateRanges(selected.date);
  // 隐藏域赋值逻辑保留
  $('#hiddenField').val(tempDate);
}).data('datepicker');

// 初始化治疗日期Datepicker
$('#cal-treatmentDate1').datepicker({
  weekStart: 1,
  autoclose: true,
}).on('changeDate', function (ev) {
  // 原有逻辑保留
}).data('datepicker');

// 初始化交付日期Datepicker
$('#cal-deliveryDate-req').datepicker({
  weekStart: 1,
  autoclose: true,
}).on('changeDate', function (selected) {
  // 原有逻辑保留
}).data('datepicker');

// 页面初始化时（包括表单错误回显）检查校准日期是否有值，有则设置范围
const initialCalDate = $('#cal-calibrationDate-req').datepicker('getDate');
if (initialCalDate) {
  updateDateRanges(initialCalDate);
}

关键说明 #

• 抽离updateDateRanges函数：把原来写在changeDate里的范围设置代码独立出来，避免重复逻辑，方便复用。
• 页面初始化时调用：通过datepicker('getDate')获取校准日期的初始值（不管是默认值还是回显的错误提交值），如果有值就调用函数设置范围，保证页面加载完成后治疗、交付日期的范围就正确。
• 保留原有事件监听：用户手动修改校准日期时，依然会触发changeDate事件调用函数更新范围，不影响原有交互逻辑。

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