国庆假期排除在JQuery中不起作用

问题描述

我正在使用JQuery-UI datepicker和Laravel-5.8

我从控制器中将NationalHoliday作为JSON发送到视图

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

javascript

<script type="text/javascript">
  var holidayDays = [];
  $(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.leavecounts.all ') }}',data: {
          'id': air_id
        },dataType: 'json',//return data will be json
        success: function(data) {
          holidayDays = data.nationalholidays;
          console.log(data.nationalholidays);
        },error: function() {

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

console.log（data.nationalholidays）;

给予

0:
holiday_date: "2020-08-25 00:00:00"
__proto__: Object
1:
holiday_date: "2020-08-26 00:00:00"
__proto__: Object
2: {holiday_date: "2020-09-25 00:00:00"}
3: {holiday_date: "2020-11-30 00:00:00"}
4: {holiday_date: "2020-09-25 00:00:00"}
5: {holiday_date: "2020-09-30 00:00:00"}
6: {holiday_date: "2020-10-14 00:00:00"}
length: 7
__proto__: Array(0)

< script type = "text/javascript" >
  $(document).ready(function() {
    holidayDays = holidayDays;

    function nationalDays(date) {
      var m = date.getMonth(),d = date.getDate(),y = date.getFullYear();
      for (i = 0; i < holidayDays.length; i++) {
        if ($.inArray((m + 1) + '-' + d + '-' + y,nationalDays) != -1 || new Date() > date) {
          console.log('bad:  ' + (m + 1) + '-' + d + '-' + y + ' / ' + holidayDays[i]);
          return [false];
        }
      }
      return [true];
    };

    function NoweekendsOrHolidays(date) {
      var Noweekend = jQuery.datepicker.Noweekends(date);
      return Noweekend[0] ? nationalDays(date) : Noweekend;
    };

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

  }); <
/script>

我想同时禁用周末和国家假日。

但是我观察到只有周末才禁用，而国定假日则没有。

我该如何纠正？

谢谢

解决方法

考虑如下示例：

  function nationalDays(date) {
    // Convert Date Object to String per Format
    var myDate = $.datepicker.formatDate("yy-mm-dd",date) + " 00:00:00";
    // Check for Date in Array
    var needle = holidayDays.indexOf(myDate);
    // Set Default
    var result = [true];
    // If Needle was found,make exception
    if (needle >= 0) {
      result = [false,"holiday","National Holiday"];
    }
    // Return Results
    return result;
  };

查看更多：https://api.jqueryui.com/datepicker/

$。datepicker.formatDate（格式，日期，选项）

将日期格式化为具有指定格式的字符串值。

上面的示例需要一个字符串数组。您似乎回传了一个对象数组。在这种情况下，您需要调用对象密钥：

data.nationalholidays[0].holiday_date

这需要将功能调整为类似以下内容：

  function nationalDays(date) {
    // Convert Date Object to String per Format
    var myDate = $.datepicker.formatDate("yy-mm-dd",date) + " 00:00:00";
    // Check for Date in Array
    var needle = -1;
    // Iterate Array of Objects
    $.each(holidayDays,function(i,d){
      if(d.holiday_date == myDate){
        needle = i;
      }
    });
    // Set Default
    var result = [true];
    // If Needle was found,"National Holiday"];
    }
    // Return Results
    return result;
  };

更完整的示例：

$(function() {
  holidayDays = holidayDays;

  function nationalDays(date) {
    var myDate = $.datepicker.formatDate("yy-mm-dd",date) + " 00:00:00";
    var needle = holidayDays.indexOf(myDate);
    var result = [true];
    if (needle >= 0) {
      result = [false,"National Holiday"];
    }
    return result;
  };

  function noWeekendsOrHolidays(date) {
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? nationalDays(date) : noWeekend;
  };

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

});