JS Function syntax error with datepicker

Question

I am receiving a syntax error. Saying my code may not work until I fix this error but I do not see anything wrong with it. The error line points to this let weekAgo = new Date(); but that looks right to me. Am I overlooking something? It is also causing the text in my datepicker "from" and "to" to not automatically show up. Any help would be greatly appreciated.

The text shows up in my fiddle but for some reason not in my application. But the application is throwing that syntax error. So any help would be very nice!

<script>
    (function() {
  //move these out since they don't need to 
  const today = new Date();
  let weekAgo = new Date();
  weekAgo.setDate(today.getDate() - 7);
  const $from = $("#StartDate");
  const $to = $("#EndDate");

  $(function() { //DOM-loaded
    //these don't change
    const reportFields = $('#location, #locationbtns, #locationtextarea, #chosendates, #submitbtn, #formattype');
    const employeeFields = $('#employeelist, #employeelistbtns, #employeelisttextarea');
    const loc = $("#loc");
    const EmployeeName = $("#EmployeeName");
    const selectedElement = $('#selected');
    const selected1Element = $('#selected1');
    const reportType = $('#reporttype');
    const generatereportform = $("form[name=generatereport]");
    $(document).click(function(clickEvent) {
      switch (clickEvent.target.id) {
        case 'add':
          setLocationOptionsSelected(true);
          break;
        case 'rem':
          setLocationOptionsSelected(false);
          break;

        case 'add1':
          setSelectedOnEmployeeOptions(true);
          break;
        case 'rem1':
          setSelectedOnEmployeeOptions(false);
          break;
      }
    });
    $(document).change(function(changeEvent) {
      switch (changeEvent.target.id) {
        case 'reporttype':
          handleReportTypeChange();
          break;
        case 'loc':
          handleLocationChange();
          break;
        case 'EmployeeName':
          handleEmployeeNameChange();
          break;
      }
    });

    function handleReportTypeChange() {
      var value = reportType.val();

      if (value === "checklistreports") {
        generatereportform[0].reset();
        reportFields.show();
        loc.prop('required', true);
        employeeFields.show();
        generatereportform.attr("action", "index.cfm?content=reportsassociate");
        EmployeeName.prop('required', true);
      } else if (value === "locationreports") {
        generatereportform[0].reset();
        reportFields.show();
        loc.prop('required', true);
        employeeFields.hide();
        generatereportform.attr("action", "index.cfm?content=reportslocation");
        EmployeeName.prop('required', false);
      } else {
        generatereportform[0].reset();
        reportFields.hide();
        loc.prop('required', false);
        employeeFields.hide();
        generatereportform.attr("action", "#");
        EmployeeName.prop('required', false);
      }

      resetDatePickers();
    }

    function dateSelectHandler(dateText) {
      if (this.id == 'StartDate') {
        $to.datepicker("option", "minDate", dateText);
      } else {
        $from.datepicker("option", "maxDate", dateText);
      }
    }

    function resetDatePickers() {
      let datePickerConfig = {
        changeMonth: true,
        maxDate: today,
        onSelect: dateSelectHandler
      };
      $from.datepicker(datePickerConfig).datepicker('setDate', weekAgo);
      $to.datepicker(Object.assign(datePickerConfig, {
        minDate: weekAgo
      })).datepicker('setDate', today);
    }

    function handleLocationChange() {
      var selected = [];

      loc.find("option:selected").each(function() {
        selected.push($(this).text());
      });

      selectedElement.val(selected.join("\n"));
    }

    function setLocationOptionsSelected(selected) {
      loc.find("option").prop("selected", selected);
      loc.change();
    }


    function setSelectedOnEmployeeOptions(selected) {
      EmployeeName.find("option").prop("selected", selected);
      EmployeeName.change();
    }

    function handleEmployeeNameChange() {
      var selected = [];
      EmployeeName.find("option:selected").each(function() {
        selected.push($(this).text());
      });
      selected1Element.val(selected.join("\n"));
    }
  });

})();
</script>

Answer 1

Object.assign() is not supported by IE 11 _{(Or any version for that matter. Refer to the Browser Compatibilty section of the MDN documentation)}. A workaround is to merely set that minDate property manually:

let toDatePickerConfig = datePickerConfig;
toDatePickerConfig.minDate = weekAgo;
$to.datepicker(toDatePickerConfig).datepicker('setDate', today);

See a demonstration of this below:

const today = new Date();
let weekAgo = new Date();
weekAgo.setDate(today.getDate() - 7);
$(function() {
  const $from = $("#StartDate");
  const $to = $("#EndDate");

  function dateSelectHandler(dateText) {
    if (this.id == 'StartDate') {
      $to.datepicker("option", "minDate", dateText);
    } else {
      $from.datepicker("option", "maxDate", dateText);
    }
  }
  let datePickerConfig = {
    changeMonth: true,
    maxDate: today,
    onSelect: dateSelectHandler
  };
  $from.datepicker(datePickerConfig).datepicker('setDate', weekAgo);
  let toDatePickerConfig = datePickerConfig;
  toDatePickerConfig.minDate = weekAgo;
  $to.datepicker(toDatePickerConfig).datepicker('setDate', today);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<span class="srch_title" for="StartDate">From:</span>
<input type='text' name="StartDate" id="StartDate" value="" required/>

<span class="srch_title" for="EndDate">To:</span>
<input type='text' name="EndDate" id="EndDate" value="" required/>