如何使用jQuery datapicker根据条件从开始日期和休假天数获取结束日期

Question

我在 Laravel-5.8 中使用 JQuery-ui datepicker 进行休假管理项目。

我有这些模型：

HrLeaveRequest

class HrLeaveRequest extends Model
{
  protected $table = 'hr_leave_requests';

  protected $fillable = [
              'id',
              'company_id',
              'employee_id',
              'leave_type_id',
              'leave_day',
              'start_date',
              'end_date',
          ];    

  protected $dates = [
      'start_date',
      'end_date',
  ];

}

HrNationalHoliday

class HrNationalHoliday extends Model
{
    protected $table = 'hr_national_holidays';

    protected $fillable = [
                  'holiday_name',
                  'holiday_date',
              ];

    protected $dates = [
        'holiday_date'
    ];

}

控制器

    public function findNationalHoliday(Request $request)
    {
       $nationalholidays               = HrNationalHoliday::select('holiday_date')->whereYear('created_at', '=', date('Y'))->get();
     return response()->json([
        'nationalholidays' => $nationalholidays,
     ]);        
   } 

查看

          <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" id="start_date" class="form-control start_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date" value="{{old('start_date')}}" >
                </div>

            </div>
          </div>                                                
          <div class="col-sm-4">
            <div class="form-group">
                <label>Leave Days:<span style="color:red;">*</span></label>
                <input  type="text" 
                id="leave_days" 
                name="leave_days" 
                class="form-control leave_days" 
                placeholder="e.g. 10" 
                value="{{old('leave_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>End 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="end_date" class="form-control end_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date" value="{{old('end_date')}}" >
                </div>

            </div>
          </div>  

Javascript

        <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.nationalholidays.all') }}',
                    data: { 'id': air_id },
                    dataType: 'json',      //return data will be json
                    success: function(data) {
                        $('#nationalholidays').val(data.nationalholidays);
                        console.log(data.nationalholidays);
                    },
                    error:function(){

                    }
                });
            });
        });
        </script>

    <script type="text/javascript">
           $("#leave_days").on('keyup blur', function (e) {
            var periodval=parseInt($("#leave_days").val());

            var startDate = $('.start_date');
            var endDate = $('.end_date');

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

          });

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

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

基本上，我有一张 NationalHoliday 的表格，其中存储了所有的 national_holidays。

我想要实现的是，用户选择start_date，当他输入leave_days onchange时，它应该添加national_holidays（如果有的话）自动显示end_date。请注意 end_date 已禁用。

到目前为止，当用户输入 leave_days 时会自动显示 end_date，但不会删除 NationalHolidays。

我的控制台中有这个：

我该怎么做：

1. 将控制器中 JSON 中的 NationalHolidays 使用到视图中（同时删除它带来的时间和日期）？它是日期格式，我一直在尝试这样做： $('#nationalholidays').val(data.nationalholidays); 这是行不通的，没有什么像#nationalholidays

2. 如何将国定假日添加到 leave_days 以获取 end_date？

谢谢

Answer 1

首先，您需要将 AJAX 查询的结果 JSON.parse() 并将其存储在一个变量中。 然后，您可以创建一个循环添加每天，如果实际日期不在您请求的假期数组中，则仅减少休假天数。