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
– Nicholas Tower, Commented Sep 25, 2017 at 15:02
all dreamweaver says is syntax error on that line. "Code hinting may not work until you fix this error." — David Brierton
– David Brierton, Commented Sep 25, 2017 at 15:03
const today = new Date(); what browser are you running on,. const is ES6. — Keith
– Keith, Commented Sep 25, 2017 at 15:03
The version of dreamweaver you running is most likely not ES6 aware.. — Keith
– Keith, Commented Sep 25, 2017 at 15:04
This might help you dreamweaver bit -> stackoverflow.com/questions/45822265/… — Keith
– Keith, Commented Sep 25, 2017 at 15:22

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-09-26 17:47:14Z

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

edited Sep 26, 2017 at 17:47

answered Sep 26, 2017 at 16:53

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Brierton Over a year ago

wanna take a look at this? codereview.stackexchange.com/questions/176527/… Im looking for the best way to write this in my environment

Collectives™ on Stack Overflow

JS Function syntax error with datepicker

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related