【发布时间】：2018-10-11 11:24:54
【问题描述】：
这篇文章是对另一个问题的跟进：
Dynamic select field options based on selected day in Woocommerce checkout
因此，借助此答案的帮助，我确实设法在结帐页面上构建了一个动态选择字段，该字段具有更改选项，基于从 Datepicker 中选择的日期。该解决方案在作者测试服务器上完美运行……
但是在我的网站上，如果选择的日期是 5 月或 10 月，代码会出现一些问题。实际上，它似乎根本不起作用。
这些过去和现在都是主要要求：
如果选择周一至周五，从 10:00 到 18:00 每 30 分钟接一次（'delivery_time'）
如果选择周六至周日，从 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
}
【问题讨论】：
-
桌面上的问题显然更糟，动态选择选项无法按预期工作。但是在移动浏览器上，只有在选择 5 月和 10 月时才会失败。两个月都有 31 天，这能带来什么建议吗？
标签： php jquery wordpress woocommerce datepicker