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>

You mentioned what line the syntax error points to, but what does the syntax error actually say? — Nicholas Tower, Sep 25 '17 at 15:02
all dreamweaver says is syntax error on that line. "Code hinting may not work until you fix this error." — David Brierton, Sep 25 '17 at 15:03
`const today = new Date();` what browser are you running on,. `const` is ES6. — Keith, Sep 25 '17 at 15:03
The version of dreamweaver you running is most likely not ES6 aware.. — Keith, Sep 25 '17 at 15:04
hmmmm wonder why the dates arent showing up in the fields then — David Brierton, Sep 25 '17 at 15:05
The Fiddle is most likely transpiling for you.. Actually on my version of IE11, you fiddle doesn't work either. — Keith, Sep 25 '17 at 15:06
@Keith you are right. My fiddle was working in chrome but not IE — David Brierton, Sep 25 '17 at 15:11
If there are no `scope` issues, you could simply replace `const` with `var`, but a better approach is to look into getting your Javascript compiled, using say webpack & Babel. — Keith, Sep 25 '17 at 15:11
there complaining about the "let" i think. Would that be var as well? — David Brierton, Sep 25 '17 at 15:15
Can you create a [mcve] - with the emphasis on **minimal** - looks like your question should have just a single line of code, but there's lots and lots of lines that doesn't seem relevant to the question. — freedomn-m, Sep 25 '17 at 15:17
Yes,.. basically `var` is functionally scoped. `let` & `const`, will capture scope at assignment. A quick look at your code, I'd say you would be fine with `var`. But like I said before, it might be an idea into looking at transpiling your code. — Keith, Sep 25 '17 at 15:17
What version of Dreamweaver are you using? Likely doesn't know about `let` and `const` yet. Hence the suggestion to change *both* to `var` (`var today = new Date();` etc). — freedomn-m, Sep 25 '17 at 15:19
Also check the rendered JS (in the browser) matches what you have in the designer. — freedomn-m, Sep 25 '17 at 15:20
This might help you dreamweaver bit -> https://stackoverflow.com/questions/45822265/adding-javascript-es6-to-dreamweaver-cs6 — Keith, Sep 25 '17 at 15:22
Hey @Keith I tried that dreamweaver fix it did not work. Just so you know — David Brierton, Sep 25 '17 at 16:52

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-09-26T17:47:14.060

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

wanna take a look at this? https://codereview.stackexchange.com/questions/176527/js-function-warning-before-closing-browser Im looking for the best way to write this in my environment — David Brierton, Sep 27 '17 at 18:56

JS Function syntax error with datepicker

1 Answers1