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。

我想要实现的是，用户选择了开始日期，并且当他输入change_days onchange时，它应该添加national_holidays（如果有）自动显示end_date。请注意，禁用了end_date。

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

我的控制台中有这个

我如何：

将控制器中的JSON中的NationalHolidays包含在视图中（还要删除带日期的时间）？它采用日期格式，我一直在尝试这样做： $（'＃nationalholidays'）。val（data.nationalholidays）; 这是行不通的，没有像#nationalholidays
这样的东西
如何将国定假日添加到请假天以获取结束日期？

谢谢

Answer 1

首先，您需要对AJAX查询的结果进行JSON.parse（）并将其存储在变量中。然后，您可以创建一个逐日添加的循环，并且仅在实际天不在您请求的假期数组中时才减少休假天。

如何使用jQuery Datapicker根据条件从开始日期获取结束日期并离开日期

1 个答案: