提交表单后，日期选择器 UI 会因错误而重置

Question

提交表单后出现错误，日期选择器 UI 会重置

var tempDate = new Date();
$('#cal-calibrationDate-req').datepicker({
  startDate: FromStartDate,
  daysOfWeekDisabled: "2,6,0,1",
  autoclose: true,
}).on('changeDate', function (selected) {

  tempDate = new Date(selected.date.valueOf());
  $('#hiddenField').val(" tempDate");
  tempDate.setDate(tempDate.getDate(new Date(selected.date.valueOf())) - 5);
               
  tempDateOne = new Date(selected.date.valueOf());
  tempDateOne.setDate(tempDateOne.getDate(new Date(selected.date.valueOf())) + 1);
  tempDateDel = new Date(selected.date.valueOf());
  tempDateDel.setDate(tempDateDel.getDate(new Date(selected.date.valueOf())) - 1);

  var minTreatmentDate = new Date(tempDate);
  var maxTreatmentDate = new Date(tempDateOne);
  var 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);

}).data('datepicker');

//TreatmentDates start below
$('#cal-treatmentDate1').datepicker({
  weekStart: 1,
  autoclose: true,
}).on('changeDate', function (ev) {

}).data('datepicker');

//DeliveryDates start below
$('#cal-deliveryDate-req').datepicker({
  weekStart: 1,
  autoclose: true,
}).on('changeDate', function (selected) {

}).data('datepicker');

以上代码初始化校准日期。用户根据具体的分娩日期和治疗日期范围选择校准日期，并在 UI 中初始化以供选择，其余部分灰显。如果表单提交时发生错误，校准日期似乎已正确初始化，但治疗和交付日期 UI 显示我不想要的所有选择日期。请帮忙。

Answer 1

 <script>
         function DateInitialize()
        {     
  
  var availableDays = [3, 4, 5]; // Tuesday, Wednesday, Thursday
  var calibrationDate = null;
  var selectedDeliveryDate = null;

  $('#cal-calibrationDate-req').datepicker({
    format: 'D dd M yyyy',
    autoclose: true,
    daysOfWeekDisabled: [0, 1, 2, 6], // Sunday, Monday, Tuesday, Saturday
    daysOfWeekHighlighted: '3,4,5', // Wednesday, Thursday, Friday
  }).on('changeDate', function(selected) {
    calibrationDate = new Date(selected.date);
    $('#cal-deliveryDate-req').datepicker('setStartDate', new Date(calibrationDate.getTime() - 5 * 24 * 60 * 60 * 1000));
    $('#cal-deliveryDate-req').datepicker('setEndDate', new Date(calibrationDate.getTime() -1 * 24 * 60 * 60 * 1000));
     $('#cal-treatmentDate1').datepicker('setStartDate', new Date(calibrationDate.getTime() - 5 * 24 * 60 * 60 * 1000));
    $('#cal-treatmentDate1').datepicker('setEndDate', new Date(calibrationDate.getTime() + 1 * 24 * 60 * 60 * 1000));
  });
  
   $('#cal-deliveryDate-req').datepicker({
    format: 'D dd M yyyy',
    autoclose: true,
  });

  $('#cal-treatmentDate1').datepicker({
    format: 'D dd M yyyy',
    autoclose: true,
  }).on('changeDate', function(selected) {
    var treatmentDate1 = new Date(selected.date);
    var selectedDeliveryDate = $('#cal-deliveryDate-req').datepicker('getDate');
    if (treatmentDate1 < selectedDeliveryDate) {
      alert("Treatment date cannot be prior to Delivery date.");
      $('#cal-treatmentDate1').datepicker('setDate', null);
    }
  });
  
  

  // Check if calibration date is already selected and set delivery date options accordingly
  var selectedCalibrationDate = $('#cal-calibrationDate-req').datepicker('getDate');
  if (selectedCalibrationDate) {
    calibrationDate = new Date(selectedCalibrationDate);
    $('#cal-deliveryDate-req').datepicker('setStartDate', new Date(calibrationDate.getTime() - 5 * 24 * 60 * 60 * 1000));
    $('#cal-deliveryDate-req').datepicker('setEndDate', new Date(calibrationDate.getTime() + 24 * 60 * 60 * 1000));
     $('#cal-treatmentDate1').datepicker('setStartDate', new Date(calibrationDate.getTime() - 5 * 24 * 60 * 60 * 1000));
    $('#cal-treatmentDate1').datepicker('setEndDate', new Date(calibrationDate.getTime() + 1 * 24 * 60 * 60 * 1000));
  }
}
    </script>