javascript - 日期选择器的 JS 函数语法错误

Question

我收到语法错误。说我的代码在我修复此错误之前可能无法正常工作，但我没有发现它有任何问题。错误行指向此 let weekAgo = new Date(); 但这对我来说是正确的。我忽略了什么吗？它还导致我的日期选择器“从”和“到”中的文本不会自动显示。任何帮助将不胜感激。

文本显示在 my fiddle 中但由于某种原因不在我的申请中。但是应用程序正在抛出该语法错误。所以任何帮助都会非常好!

<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() IE 11 _{(或与此相关的任何版本。请参阅 MDN 文档的 Browser Compatibilty 部分)} 不支持。解决方法是仅手动设置 minDate 属性:

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

请看下面的演示:

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/>