如何解决未捕获的语法错误：JQuery-UI 日期选取器中出现意外的标记"=="

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>

用户只能向commercement_date和leave_days添加输入。用户选择commercement_date，当leave_days on keyup时，它将leave_day添加到commercement_date以获得resumption_date。这在最初是有效的。

现在我想添加一个条件，如果weekendinclusive为0，那么它应该在showDay:$.datepicker.noWeekends之前实现

但我得到了这个错误：

创建：842未捕获语法错误：意外的令牌"==">

并且它指向：

if(weekendval==0(｛

JQuery中的

。

如何解决此问题？

感谢

Answer 1

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

这里有几个选项：

预分配选项：

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');