Datepicker UI resets on error after form submission

Question

Datepicker UI resets on error after form submission

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');

Above code initializes Calibration date. User selects calibration date based on which specific range of delivery date and treatment date are initialized in UI for selection and rest greyed out . If error occurs on form submission, the calibration dates seems to be initialized correctly but Treatment and Delivery dates UI shows all dates for selection which I do not want. Please help.

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>