这篇文章是对另一个问题的跟进：
Dynamic select field options based on selected day in Woocommerce checkout
所以，有了这个答案帮助，我确实设法在结帐页面上构建了一个动态选择字段，该字段根据Datepicker中选择的日期更改了选项。此解决方案在作者测试服务器上完美运行...
但是，在我的网站上，如果关键日期是5月或10月，则代码会出现问题。实际上它似乎根本不起作用。
这些是主要要求：
如果选择周一至周五，从10:00到18:00每隔30分钟接听一次（'delivery_time'）
如果选择Sat-Sun ，则从10:00到15:00每隔30分钟接听一次（'delivery_time'）
只有月中的第一个星期日。其他星期日，没有选择。 （新要求于4月份增加并正在运作）
这与我的安装有什么关系吗？我也尝试禁用所有插件并停用Datepicker的本地化程序。
以下是动态选择的代码：
/**
*
* 2018-04-16
* Picking date and time
* Dynamic select based on selected day
*
*/
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 the datepicker jQuery-ui plugin script
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}
// Datepicker field and select time field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
echo '<div id="date-time-wrapper">';
woocommerce_form_field('delivery_date', array(
'type' => 'text',
'class'=> array('delivery-date-class form-row-first'),
'label' => __('Vælg dato for afhentning'),
'required' => true,
//'placeholder' => __('Pick a date')
), $checkout->get_value('delivery_date') );
$options = array('' => __('Afhentning kl.') );
woocommerce_form_field( 'delivery_time', array(
'type' => 'select',
'class' => array('delivery-time-class form-row-last'),
'label' => __('Vælg tidspunkt for afhentning'),
'required' => true,
'options' => $options,
), $checkout->get_value( 'delivery_time' ) );
// Restricted options array
$options1 = array(
'10:00' => __( '10:00' ),
'10:30' => __( '10:30' ),
'11:00' => __( '11:00' ),
'11:30' => __( '11:30' ),
'12:00' => __( '12:00' ),
'12:30' => __( '12:30' ),
'13:00' => __( '13:00' ),
'13:30' => __( '13:30' ),
'14:00' => __( '14:00' ),
'14:30' => __( '14:30' ),
'15:00' => __( '15:00' ),
);
// The other part of options array
$options2 = array(
'15:30' => __( '15:30' ),
'16:00' => __( '16:00' ),
'16:30' => __( '16:30' ),
'17:00' => __( '17:00' ),
'17:30' => __( '17:30' ),
'18:00' => __( '18:00' ),
);
// The third part of options array
$options3 = array(
'Sundays_Closed' => __( 'Åbent første søndag i måneden'),
);
// Merging options arrays
$options1 = array_merge($options, $options1); // Partial
$options = array_merge($options1,$options2); // Full
echo '<br clear="all"></div>';
?>
<script language="javascript">
jQuery( function($){
var a = <?php echo json_encode($options); ?>,
b = <?php echo json_encode($options1); ?>,
e = <?php echo json_encode($options3); ?>,
c = new Date(),
s = 'select#delivery_time';
// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var o = '';
$.each( opt, function( key, value ){
o += '<option value="'+key+'">'+value+'</option>';
});
$(s).html(o);
}
// Once DOM is loaded
//Only open first Sunday in month
if( c.getDay() == 0 && c.getDate() > 7 ){
dynamicSelectOptions( e );
}
else if( c.getDay() == 6 || c.getDay() == 0){
dynamicSelectOptions( b );
}
else
dynamicSelectOptions( a );
// Select time to selectWoo
$(s).selectWoo();
// Datepicker
$('#delivery_date').datepicker({
dateFormat: 'd MM, y',
minDate:1,
maxDate:new Date(2018, 12),
onSelect: function(){
// Live event: On selected date event
var d = new Date($(this).val());
//Only first Sunday in month open
if( d.getDay() == 0 && d.getDate() > 7 ){
dynamicSelectOptions( e );
}
else if( d.getDay() == 6 || d.getDay() == 0){
dynamicSelectOptions( b );
}
else
dynamicSelectOptions( a );
}
}).parent().after('<div id="order-desc"></div>');
});
</script>
<?php
}
答案 0 :(得分：0)
我在您的代码中做了一些小改动：
但我不确定它是否适用于您的服务器配置......我希望这能解决问题（我在两台测试服务器配置中都没有）。
您的代码重新访问了代码：
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 the datepicker jQuery-ui plugin script
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}
// Utility function (with all option arrays)
function select_options( $type = '' ){
$options = array('' => __('Afhentning kl.') ); // Default start
$options1 = array( // Restricted options array
'10:00' => __( '10:00' ), '10:30' => __( '10:30' ), '11:00' => __( '11:00' ),
'11:30' => __( '11:30' ), '12:00' => __( '12:00' ), '12:30' => __( '12:30' ),
'13:00' => __( '13:00' ), '13:30' => __( '13:30' ), '14:00' => __( '14:00' ),
'14:30' => __( '14:30' ), '15:00' => __( '15:00' ),
);
$options2 = array( // complementary options array
'15:30' => __( '15:30' ), '16:00' => __( '16:00' ), '16:30' => __( '16:30' ),
'17:00' => __( '17:00' ), '17:30' => __( '17:30' ),'18:00' => __( '18:00' ),
);
if( $type == 'partial' ){
return array_merge($options, $options1); // Partial;
} elseif ( $type == 'full' ){
return array_merge($options,$options1,$options2); // Full
} elseif ( $type == 'close' ){
return array( 'Sundays_Closed' => __( 'Åbent første søndag i måneden') ); // Sundays closed
} else {
return $options; // Default (start)
}
}
// Checkout Datepicker field and select time field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
echo '<div id="date-time-wrapper">';
woocommerce_form_field('delivery_date', array(
'type' => 'text',
'class'=> array('delivery-date-class form-row-first'),
'label' => __('Vælg dato for afhentning'),
'required' => true,
//'placeholder' => __('Pick a date')
), $checkout->get_value('delivery_date') );
$options = select_options();
woocommerce_form_field( 'delivery_time', array(
'type' => 'select',
'class' => array('delivery-time-class form-row-last'),
'label' => __('Vælg tidspunkt for afhentning'),
'required' => true,
'options' => $options,
), $checkout->get_value( 'delivery_time' ) );
echo '<br clear="all"></div>';
}
add_action( 'wp_footer', 'date_picker_js_script' );
function date_picker_js_script() {
// Only on checkout page
if( ! is_checkout() ) return;
?>
<script language="javascript">
jQuery( function($){
var a = <?php echo json_encode(select_options('full')); ?>,
b = <?php echo json_encode(select_options('partial')); ?>,
e = <?php echo json_encode(select_options('close')); ?>,
c = new Date(),
s = 'select#delivery_time';
// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var o = '';
$.each( opt, function( key, value ){
o += '<option value="'+key+'">'+value+'</option>';
});
$(s).html(o);
}
// ===> Just for testing - To be removed
console.log('Day: '+c.getDay()+' | Date: '+c.getDate());
// 1. Once DOM is loaded
if( c.getDay() == 0 && c.getDate() > 7 ){ // Only open first Sunday in month
dynamicSelectOptions( e );
} else if( c.getDay() == 6 || c.getDay() == 0){ // Weekends
dynamicSelectOptions( b );
} else { // all others days
dynamicSelectOptions( a );
}
// Select time to selectWoo
$(s).selectWoo();
// Datepicker
$('#delivery_date').datepicker({
dateFormat: 'd MM, y',
minDate:1,
maxDate:new Date(2018, 12),
onSelect: function(){
// On live calendar event: On selected date event
var d = new Date($(this).val());
// ===> Just for testing - To be removed
console.log('Day: '+d.getDay()+' | Date: '+d.getDate());
if( d.getDay() == 0 && d.getDate() > 7 ) { // Only first Sunday in month open
dynamicSelectOptions( e );
} else if( d.getDay() == 6 || d.getDay() == 0) { // Weekends
dynamicSelectOptions( b );
} else { // all others days
dynamicSelectOptions( a );
}
}
}).parent().after('<div id="order-desc"></div>');
});
</script>
<?php
}
代码放在活动子主题（或活动主题）的function.php文件中。
我已经使用WooCommerce 3.2.x和3.3.x在2个不同的测试服务器上测试了您的代码，它可以工作（在不同的浏览器和平台上测试过）。
此问题可能与您的主题，某些插件或其他自定义有关。