Javascript 在WooCommerce中的jQuery datepicker问题中禁用工作日和假日

我有一个自定义的woocommerce过滤器函数，它使用jQuery ui日期选择器。我想用下面的代码自定义选项，但它只会使日期选择器消失，即使我尝试将脚本排队。此代码是根据以下答案定制的：

下面是delivery-date.js的代码，我也在下面的php中排队

/*====================================================
交货日期代码
只允许两周的预订时间。
拨号天数周日=0，周六=6
m/d不允许的日期-1,1 | 1,26 | 2,16 | 3,8 | 4,14 | 4,16 | 4,17 | 5,1 | 6,9 | 10,9 | 12,25 | 12,26
=====================================================*/
jQuery（函数（$）{
$（“#日期选择器”）。日期选择器({
maxDate:“+2W”，
展示日前：现在或节假日
}); 
var natDays=[[1,1]、[1,26]、[2,16]、[3,8]、[4,14]、[4,16]、[4,17]、[5,1]、[6,3]、[6,9]、[10,9]、[12,25]、[12,26]；
功能国家日（日期）{
对于（i=0；i});您的数组与中使用的数组不同：


要使它与Wordpress/Woocommerce中的自定义数组一起工作，您需要进行一些更改。在下面的代码中，我将两个Javascript函数合并为一个：

jQuery（函数（$）{
var natDays=[[1,1]，[1,26]，[2,16]，[3,8]，[4,14]，[4,16]，
[4,17]、[5,1]、[6,3]、[6,9]、[10,9]、[12,25]、[12,26]；//假日
//没有周末也没有假期
函数noweekendandadadages（日期）{
//没有假期
var nationalDays=[]；
对于（i=0；i

这只适用于您的自定义数组，并且正确显示了jQuery ui日期选择器


要将其合并到中，您将使用以下方法：

 // Enable available jQuery datepicker script in Wordpress
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {

    // Only on front-end and checkout page
    if( is_admin() || ! is_checkout() ) return;

    // Load available datepicker jQuery-ui plugin script
    wp_enqueue_script( 'jquery-ui-datepicker' );
}

// Add and display custom checkout fields + jQuery script
add_filter( 'woocommerce_checkout_fields' , 'brown_remove_billing_postcode_checkout' );
function brown_remove_billing_postcode_checkout( $fields ) {
    // Your Settings
    $start_hour = 11; // start time (in hours)
    $end_hour = 16; // end time (in hours)
    $offset = 1; // One hour before slot time (can be a float number like 1.5
    // date_default_timezone_set ('Africa/Kampala'); // The timezone
    date_default_timezone_set('Australia/Brisbane');

    // Initializing variables
    $hour = 3600; // 1 hour in seconds
    $day = $hour * 24; // 1 day in seconds
    $now = strtotime("now"); // Now time
    $real_now = $now + ($offset * $hour); // Now time + offset
    $today_date = date("Y-m-d"); // today date
    $tomorrow_date = date("Y-m-d", strtotime("+1 day")); // tomorow date
    $today_time = strtotime($today_date); // Today time at 00:00 in seconds
    $tomorrow_time = strtotime($tomorrow_date); // Tomorrow time at 00:00 in seconds
    $start_time = $today_time + ( $start_hour * $hour ); // Start datetime in seconds
    $end_time = $today_time + ( $end_hour * $hour ); // End datetime in seconds
    $today_slots = $default_slots = $option_days = array();

    // Add Delivery day field (with jquery-ui datepicker enabled)
    $fields['billing']['billing_delivery_day'] = array(
        'label'         => __('Delivery Day', 'woocommerce'),
        'placeholder'   => _x('Date for your delivery', 'placeholder', 'woocommerce'),
        'required'      => true,
        'id'            => 'datepicker', // Enable jQuery datepicker for this field
        'class'         => array('form-row-first'),
        'clear'         => false,
        'autocomplete'  => false,
        'type'          => 'text'
    );
   // Add Delivery hour slots
    $fields['billing']['billing_delivery_hour'] = array(
        'label'        => __('Delivery Time', 'woocommerce'),
        'required'     => true,
        'class'        => array('form-row-last'),
        'clear'        => false,
        'autocomplete' => false,
        'type'         => 'select',
        'options'      => array( '' => __('Select time for your delivery') ),
    );

    // Making the delivery hour slots <option> arrays for Javascript
    for($i = $start_time; $i <= $end_time; $i += 1800 ){ // 1800 seconds is half an hour
        $key     = date('H:i', $i);
        $value   = date('h:ia', $i);

        // Today available hour slots array
        if($real_now < $i)
            $today_slots[$key] = $value;

        // Default hour slots array
        $default_slots[$key] = $value;
    }

    // The correct start date and time (today or tomorow) for Javascript
    $date = $real_now < $end_time ? $today_date : $tomorrow_date;
    $dtime = $real_now < $end_time ? date("Y-m-d\TH:i:s", $today_time) : date("Y-m-d\TH:i:s", $tomorrow_time);

    ?>
    <script>
        jQuery(function($){
            var offsetDate = 14, // Number of days enabled in the date picker
                startingDate = new Date('<?php echo $dtime; ?>'), // Starting day
                endingDate = new Date('<?php echo $dtime; ?>'), // End date is calculated below
                todaySlots = <?php echo json_encode($today_slots); ?>,
                defaultSlots = <?php echo json_encode($default_slots); ?>,
                sDay = 'input[name ="billing_delivery_day"]',
                sHour = 'select[name ="billing_delivery_hour"]',
                defaultOption = $(sHour+' > option').text(),
                todaySlotsLength = Object.keys(todaySlots).length,
                natDays = [ [1,1], [1,26], [2,16], [3,8], [4,14], [4, 16],
                [4,17], [5,1], [6,3], [6,9], [10,9], [12,25], [12, 26] ]; // Holidays

            // ------ 1). Dates and Date picker ------ //

            // Set the default field start date
            $(sDay).val('<?php echo $date; ?>');
            $('#datepicker_field').addClass('woocommerce-validated');

            // Max date calculation
            endingDate.setDate(startingDate.getDate()+offsetDate);
            console.log(new Date($(sDay).val()));

            // No weekends and no holidays
            function noWeekendAndHolidays(date) {
                // No Holidays
                var nationalDays = [];
                for (i = 0; i < natDays.length; i++)
                    if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
                        nationalDays = [false, ''];
                        return false; // stop the loop
                    }
                if( ! nationalDays[0] )
                    nationalDays = [true, ''];

                // No weekends (or no holidays)
                var noWeekend = $.datepicker.noWeekends(date);
                if (noWeekend[0])
                    return nationalDays;
                else
                    return noWeekend;
            }

            // Jquery-ui datepicker
            $("#datepicker").datepicker({
                beforeShowDay: noWeekendAndHolidays,
                dateFormat: "yy-mm-dd",
                minDate: startingDate,
                maxDate: endingDate, // optional
                setDate: startingDate,
            });

            // ------ 2). HOUR slots select field (dynamic <option>) ------ //

            // Build the <option> html html in the select field dynamically
            function dynamic_select_options_buid( slotsType ){
                $.each( slotsType, function( index, value ){
                    $(sHour).append('<option value="'+index+'">'+value+'</option>');
                });
            }
            // Replace and Build the <option> html in the select field dynamically
            function dynamic_select_options_replace( slotsType ){
                $(sHour+' > option').remove();
                $(sHour).append('<option value="">'+defaultOption+'</option>');
                dynamic_select_options_buid( slotsType );
            }

            console.log(defaultOption);
            console.log(todaySlotsLength);
            if(todaySlotsLength != 0 && todaySlotsLength < 11 ){
                // Loaded at start
                dynamic_select_options_buid( todaySlots );

                // Live date selection event
                $(sDay).change( function(){
                    console.log('day changed: '+$(this).val());
                    if( $(this).val() != '<?php echo $date; ?>' )
                        dynamic_select_options_replace( defaultSlots );
                    else
                        dynamic_select_options_replace( todaySlots );
                })
            } else {
                dynamic_select_options_buid( defaultSlots );
            }
        });
    </script>
    <?
    return $fields;
}

//在Wordpress中启用可用的jQuery日期选择器脚本
添加操作（'wp_排队_脚本'，'enabling_date_picker'）；
函数启用日期选择器（）{
//仅在前端和签出页面上
if（is_admin（）| |！is_checkout（））返回；
//加载可用的datepicker jQuery ui插件脚本
wp_enqueue_脚本（'jqueryui-datepicker'）；
}
//添加和显示自定义签出字段+jQuery脚本
添加过滤器（“woocommerce\u checkout\u fields”、“brown\u remove\u billing\u postcode\u checkout”）；
函数brown\u remove\u billing\u postcode\u checkout（$fields）{
//你的设置
$start_hour=11；//开始时间（小时）
$end_hour=16；//结束时间（小时）
$offset=1；//时隙时间前一小时（可以是类似于1.5的浮点数
//日期\默认\时区\设置（'Africa/Kampala'）；//时区
日期默认时区设置（“澳大利亚/布里斯班”）；
//初始化变量
$hour=3600；//1小时（秒）
$day=$hour*24；//以秒为单位的一天
$now=strotime（“now”）；//now时间
$real_now=$now+（$offset*$hour）；//now time+offset
$today_date=日期（“Y-m-d”）；//今天日期
$MOTORY_date=日期（“Y-m-d”，标准时间（“+1天”）；//明天日期
$today\u time=strottime（$today\u date）；//今天时间00:00秒
$MOTORY\u time=STROTIME（$MOTORY\u date）；//明天时间00:00秒
$start_time=$today_time+（$start_hour*$hour）；//开始日期时间（秒）
$end_time=$today_time+（$end_hour*$hour）；//结束日期时间（秒）
$today\u slots=$default\u slots=$option\u days=array（）；
//添加交货日期字段（启用jquery ui日期选择器）
$fields['billing']['billing\u delivery\u day']=array(
“标签”=>“‘交货日’、‘woocommerce’”，
“占位符”=>\u x（“交货日期”、“占位符”、“电子商务”），
“必需”=>true，
'id'=>'datepicker'，//为此字段启用jQuery datepicker
'class'=>array（'form-row-first'），
“清除”=>错误，
“自动完成”=>false，
'键入'=>'文本'
);
//增加送货时间
$fields['billing']['billing\u delivery\u hour']=array(
“标签”=>“‘交货时间’、‘woocommerce’”，
“必需”=>true，
'class'=>数组（'form-row-last'），
“清除”=>错误，
“自动完成”=>false，
'类型'=>'选择'，
'options'=>array（'''=>\'uuuu（'Select time for your delivery'）），
);
//为Javascript制作交付时间槽数组
对于（$i=$start\u time；$i
jQuery（函数（$）{
var offsetDate=14，//在日期选择器中启用的天数
开始日期=新日期（“”），//开始日期
endingDate=新日期（“”），//结束日期计算如下
今日时段=，
默认插槽=，
星期四='input[name=“billing_delivery_day”]，