在Laravel-5.8项目中,我正在实现JQuery-UI datepicker
控制器:
public function findEmployeeLeaveCount(Request $request)
{
$userCompany = Auth::user()->company_id;
$userEmployee = Auth::user()->employee_id;
$employeeCode = Auth::user()->employee_code;
$employeeemptypeid = HrEmployee::where('employee_code', $employeeCode)->pluck('employee_type_id')->first();
$leavetypeid = HrLeaveType::select('id')->where('company_id', $userCompany)->where('id',$request->id)->first()->id;
$weekendinclusive = HrLeaveTypeDetail::where('leave_type_id', $leavetypeid)->where('employee_type_id', $employeeemptypeid)->pluck('weekend_inclusive')->first();
return response()->json([
'weekendinclusive' => $weekendinclusive,
]);
}
我从控制器传递了一个周末,使用JSON进行查看
查看
<select id="leave_type" class="form-control select2bs4" data-placeholder="Choose Leave Type" tabindex="1" name="leave_type_id" style="width: 100%;">
<option value="">Select Leave Type</option>
@if($leavetypes->count() > 0)
@foreach($leavetypes as $leavetype)
<option value="{{$leavetype->id}}" {{ old('leave_type_id', $leaverequest->leave_type_id) == $leavetype->id ? 'selected' : ''}}>{{$leavetype->leave_type_name}}
</option>
@endforeach
@endif
</select>
<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>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('change', '#leave_type', function() {
var air_id = $(this).val();
var a = $(this).parent();
var op = "";
$.ajax({
type: 'get',
url: '{{ route('get.employeeleavecounts.all') }}',
data: { 'id': air_id },
dataType: 'json', //return data will be json
success: function(data) {
$('#weekendinclusive').val(data.weekendinclusive);
},
error:function(){
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#leave_days").on('keyup blur', function (e) {
var periodval=parseInt($("#leave_days").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(),
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,
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
enableOnReadonly: true,
beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
});
});
</script>
从上图中,我从开始日期开始恢复日期,并使用#leave_days离开日期。效果很好。
如何在#leave_days内向我的JQuery添加If语句,即如果#weekendinclusive = 1,则遵循我以前使用的正常模式,包括周末,但是如果#weekendinclusive = 0,则应将周末从我的工作中排除在#leave_days