关键词：
【中文标题】在 WooCommerce 中的 jQuery datepicker 问题中禁用工作日和节假日【英文标题】：Disable weekdays and holidays in jQuery datepicker issue in WooCommerce 【发布时间】：2018-07-06 15:16:07 【问题描述】：我有一个使用 jQuery-ui datepicker 的自定义 woocommerce 过滤器功能。我想使用下面的代码自定义选项，但它只会使日期选择器消失，即使我尝试将脚本排入队列也是如此。此代码是根据此答案定制的：
Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
下面是delivery-date.js的代码，我也在下面的php中排队。
/*====================================================
Delivery date Code
Only two weeks booking time allowed.
Diallowed days Sunday = 0, Saturday = 6
Dates Disallowed by m/d - 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
=====================================================*/
jQuery(function($)
$('#datepicker').datepicker(
maxDate: '+2W',
beforeShowDay: noWeekendsOrHolidays
);
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] ];
function nationalDays(date)
for (i = 0; i < natDays.length; i++)
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1])
return [false, natDays[i][2] + '_day'];
return [true, ''];
function noWeekendsOrHolidays(date)
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0])
return nationalDays(date);
else
return noWeekend;
);我正在尝试在这个答案代码中合并：Time loop for WooCommerce checkout select option from date picker input field
但它不起作用。
【问题讨论】：
【参考方案1】：您的阵列与以下中使用的阵列不同：Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
要使其与您在 Wordpress / Woocommerce 中的自定义数组一起使用，您需要进行一些更改。在下面的代码中，我将 2 个 Javascript 函数合并为一个：
jQuery(function($)
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] ]; // Holidays
// 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,
maxDate: '+2W',
);
);
这仅适用于您的自定义数组，并且 jQuery-ui 日期选择器 正确显示。
要将其合并到 my other answer code 中，您可以这样：
// 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;
代码进入您的活动子主题（或活动主题）的 function.php 文件中。
经过测试并且有效。
【讨论】：
根据 WooCommerce 中的自定义字段值将文本添加到订单摘要
】根据WooCommerce中的自定义字段值将文本添加到订单摘要【英文标题】：AddtexttoordersummarybasedonacustomfieldvalueinWooCommerce【发布时间】：2018-02-0423:50:51【问题描述】：我已成功向我的WooCommerce结帐页面添加了一个自定义字段，该字段... 查看详情
如何在 jQuery 中使用 WooCommerce 产品基础价格 |重力形式
】如何在jQuery中使用WooCommerce产品基础价格|重力形式【英文标题】：HowtouseWooCommerceproductbasepricewithjQuery|GravityForm【发布时间】：2021-11-2000:32:24【问题描述】：为什么下面的方法不起作用，我应该怎么做？你有更好更短的方法来编... 查看详情
woocommerce_order_status_completed 没有数据
】woocommerce_order_status_completed没有数据【英文标题】：woocommerce_order_status_completedhasnodata【发布时间】：2021-10-2305:22:45【问题描述】：我已经为woocommerce_order_status_completed创建了一个webhook，这个钩子在订单完成时成功触发。问题是... 查看详情
Woocommerce 如何使用 jquery 在“购物车小计”中获取值
】Woocommerce如何使用jquery在“购物车小计”中获取值【英文标题】：Woocommercehowtousejquerytogetavalueinside"cart-subtotal"【发布时间】：2021-11-1215:47:18【问题描述】：这个问题已经提出，但我需要一些不同的东西，我什至不知道这... 查看详情
在 Woocommerce 可变产品上获取 jQuery 中选定的变体价格
】在Woocommerce可变产品上获取jQuery中选定的变体价格【英文标题】：GetselectedvariationpriceinjQueryonWoocommerceVariableproducts【发布时间】：2019-07-2209:54:17【问题描述】：如何使用变体ID使用javascript查找变体价格？这就是我到目前为止所... 查看详情
在 WooCommerce 结帐时将产品详细信息从订单传递到 jQuery/javascript
】在WooCommerce结帐时将产品详细信息从订单传递到jQuery/javascript【英文标题】：PassingproductdetailsfromanordertojQuery/javascriptonWooCommercecheckout【发布时间】：2021-11-3019:20:22【问题描述】：我正在尝试从Woocommerce结账时捕获ProductId和价格，... 查看详情
在循环之外获取当前变体 id 并将其用于服务器端功能。 WooCommerce / jQuery
】在循环之外获取当前变体id并将其用于服务器端功能。WooCommerce/jQuery【英文标题】：Getcurrentvariationidoutsideoftheloopanduseitonserversidefunction.WooCommerce/jQuery【发布时间】：2019-11-2723:24:32【问题描述】：场景添加到购物车事件中未使用W... 查看详情
如何制作 div，由 jquery 在 woocommerce 结帐表单、动态或完全在表单内添加？
】如何制作div，由jquery在woocommerce结帐表单、动态或完全在表单内添加？【英文标题】：Howtomakedivs,addedbyjqueryinwoocommercecheckoutform,dynamic,orexactlyinsidetheform?【发布时间】：2021-12-2919:21:28【问题描述】：我需要在结帐表单中添加一些... 查看详情
在 WooCommerce 中的标题下方显示循环产品类别项目描述
】在WooCommerce中的标题下方显示循环产品类别项目描述【英文标题】：DisplayloopproductcategoryitemsdescriptionbelowtheirtitleinWooCommerce【发布时间】：2021-07-1113:09:01【问题描述】：我想知道如何在woocommerce商店按类别页面的类别标题下方添... 查看详情
在woocommerce中使用ajax删除购物车中的产品
】在woocommerce中使用ajax删除购物车中的产品【英文标题】：Removeproductinthecartusingajaxinwoocommerce【发布时间】：2014-03-2023:40:19【问题描述】：我想在不点击链接的情况下使用ajax删除woocommerce购物车中的产品。如果您遇到过此类功能... 查看详情
触发jquery代码的Woocommerce函数
】触发jquery代码的Woocommerce函数【英文标题】：Woocommercefunctionthattriggersjquerycode【发布时间】：2021-12-1019:42:50【问题描述】：当将特定类别的产品添加到woocommerce购物车时，我试图通过使用简单的JS函数模拟按钮单击来触发弹出窗... 查看详情
在 Shop 中的 Woocommerce 产品循环中放置自定义徽章的最佳方式是啥
】在Shop中的Woocommerce产品循环中放置自定义徽章的最佳方式是啥【英文标题】：WhatisthebestwaytopositioncustombadgesonWoocommerceprodcutloopinShop在Shop中的Woocommerce产品循环中放置自定义徽章的最佳方式是什么【发布时间】：2022-01-1703:43:07【... 查看详情
phpcheatsheet-在functions.php中的woocommerce定制(代码片段)
phpcheatsheet-在functions.php中的woocommerce定制(代码片段)
更改 Woocommerce 中的结帐订单审查部分
】更改Woocommerce中的结帐订单审查部分【英文标题】：ChangecheckoutorderreviewsectioninWoocommerce【发布时间】：2019-01-2117:01:20【问题描述】：在Woocommerce中，在他查看订单表之前，我已成功移动付款方式部分：Changepaymentmethodslocationbeforeo... 查看详情
在 Woocommerce 中的购物车和结帐总计上插入自定义总计行
】在Woocommerce中的购物车和结帐总计上插入自定义总计行【英文标题】：InsertacustomtotalrowoncartandcheckouttotalsinWoocommerce【发布时间】：2018-09-1003:23:35【问题描述】：在woocommerce中，我成功地向Woocommerce简单产品添加了一个自定义字段... 查看详情
在 Woocommerce 中的订单详细信息表之前更改付款方式位置
】在Woocommerce中的订单详细信息表之前更改付款方式位置【英文标题】：ChangepaymentmethodslocationbeforeorderdetailstableinWoocommerce【发布时间】：2019-01-2103:51:56【问题描述】：我需要稍微更改一下默认的Woocommerce结帐。我需要将付款选项... 查看详情
向产品属性添加新术语并将其设置在 Woocommerce 中的产品中
】向产品属性添加新术语并将其设置在Woocommerce中的产品中【英文标题】：AddanewtermtoaproductattributeandsetitintheproductinWoocommerce【发布时间】：2019-05-1107:42:10【问题描述】：我的自定义分类（WooCommerce属性）已经存在，我正在使用以... 查看详情