How to resolve Uncaught SyntaxError: Unexpected token '==' in JQuery-UI datepicker

Question

在我的 Laravel-5.8 中，我使用 JQuery-UI 日期选择器：

< script type = "text/javascript" >
  $(document).ready(function() {

    $("#leave_days").on('keyup blur', function(e) {
      var periodval = parseInt($("#leave_days").val());
      var weekendval = parseInt($("#weekendinclusive").val());

      var startDate = $('.commencement_date');
      var endDate = $('.resumption_date');

      var dte = startDate.datepicker("getDate");

      dte.setDate(dte.getDate() + periodval);
      endDate.datepicker("setDate", dte);

    });

    $('.commencement_date').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      setDate: new Date(),
      if (weekendval == 0) {
        beforeShowDay: $.datepicker.noWeekends,
      }
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    }).datepicker('setDate', '1');

    $('.resumption_date').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      if (weekendval == 0) {
        beforeShowDay: $.datepicker.noWeekends,
      }
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
      enableOnReadonly: true,
      beforeShow: function(i) {
        if ($(i).attr('readonly')) {
          return false;
        }
      }
    });
  }); <
/script>

<input type="hidden" id="weekendinclusive" class="form-control" value="0">
<div class="col-sm-4">
  <div class="form-group">
    <label>Commencement Date:<span style="color:red;">*</span></label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
      </div>
      <input type="text" id="commencement_date" class="form-control commencement_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="commencement_date" value="{{old('commencement_date')}}">
    </div>

  </div>
</div>
<div class="col-sm-4">
  <div class="form-group">
    <label>Leave Days:<span style="color:red;">*</span></label><input type="hidden" id="leave_balance" value="0" disabled>
    <input type="text" id="leave_days" name="no_of_days" class="form-control no_of_days" placeholder="e.g. 10" value="{{old('no_of_days')}}" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" style="width: 100%;"
      maxlength="3" onkeyup="checkScore(this.value)" onkeypress="allowNumbersOnly(event)">
  </div>
</div>
<div class="col-sm-4">
  <div class="form-group">
    <label>Resumption Date:</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
      </div>
      <input type="text" id="resumption_date" class="form-control resumption_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="resumption_date" value="{{old('resumption_date')}}">
    </div>

  </div>
</div>

用户只能向 commencement_date 和 leave_days 添加输入。用户选择 commencement_date 并且当 leave_days onkeyup 时，它将 leave_days 添加到 commencement_date 以获得 resumption_date。这最初是有效的。

现在我想添加一个条件，如果weekendinclusive为0，那么它应该执行beforeShowDay: $.datepicker.noWeekends

但是我得到了这个错误：

create:842 Uncaught SyntaxError: Unexpected token '=='

它指向：

if (weekendval == 0){

在 JQuery.

我该如何解决这个问题？

谢谢

Answer 1

您不能使用内联 if 以这种方式有条件地设置对象属性。

这里有几个选项：

Pre-assign 选项：

var options = {
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      setDate: new Date(),
     yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
};
if (weekendval == 0) {
     options.beforeShowDay = $.datepicker.noWeekends,
}
$('.commencement_date').datepicker(options).datepicker('setDate', '1');

使用Object.assign（或jquery.extend，如果你需要支持古老的浏览器）：

$('.resumption_date').datepicker(Object.assign({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
      enableOnReadonly: true,
      beforeShow: function(i) {
        if ($(i).attr('readonly')) {
          return false;
        }
      }
    }, weekendval == 0 ? { beforeShowDay: $.datepicker.noWeekends } : {})
).datepicker('setDate', '1');

如果使用 ES6 语法也可以写成：

$('.resumption_date').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
      enableOnReadonly: true,
      beforeShow: function(i) {
        if ($(i).attr('readonly')) {
          return false;
        }
      },
      ...(weekendval == 0 ? { beforeShowDay: $.datepicker.noWeekends } : {}))
    }, 
).datepicker('setDate', '1');

How to resolve Uncaught SyntaxError: Unexpected token '==' in JQuery-UI datepicker

How to resolve Uncaught SyntaxError: Unexpected token '==' in JQuery-UI datepicker

jquery

jquery-ui-datepicker

laravel