如何使用jQuery datepicker根据开始日期和输入的天数设置结束日期

时间:2020-09-24 16:31:52

标签: jquery laravel jquery-ui-datepicker

我正在使用Laravel-5.8和jQuery datepicker工作Laravel离开应用程序

我有这个模型

class HolidayDate extends Model
{
    protected $table = 'holiday_dates';
    protected $primaryKey = 'id';
    protected $fillable = [
                  'holiday_date',
              ];
}

class LeaveRequest extends Model
{
    protected $table = 'leave_requests';
    protected $primaryKey = 'id';
    protected $fillable = [
                  'start_date',
                  'end_date',
                  'leave_days',
              ];
}

查看:

<script type="text/javascript">
            $(function () {
                $( '.start_date' ).datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true,     
                    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                    beforeShowDay: $.datepicker.noWeekends
                });
        });
    </script>
    <script type="text/javascript">
            $(function () {
                $( '.end_date' ).datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true,     
                    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                    beforeShowDay: $.datepicker.noWeekends
                });
        });
</script>
<div class="col-sm-4">
                <div class="form-group">
                    <label>Start 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" class="form-control start_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date">
                    </div>
 
                </div>
              </div> 
              <div class="col-sm-4">
              <div class="col-sm-4">
                <div class="form-group">
                    <label>Leave Days:<span style="color:red;">*</span></label>
                    <input  type="text" name="leave_days" placeholder="Enter leave_days here" class="form-control" value="{{old('leave_days')}}">
                </div>
              </div>               
                <div class="form-group">
                    <label>End 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" class="form-control end_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date">
                    </div>
 
                </div>
</div>

我正在使用jQuery datepicker

到目前为止,用户选择了开始日期和结束日期。 但是我要实现的是,当用户选择start_date和Leave_days而没有end_date时。系统应自动减去周末和节假日(从holiday_dates模型),并从中得出end_date。用户应该无法使用end_date。

如何从所有这些中加载end_date?

谢谢

0 个答案:

没有答案