动态选择字段选项基于Woocommerce结帐中的选定日期

我在Woocommerce结帐中添加了2个自定义字段：

  1. 一个jQuery-ui Datepicker字段，
  2. 选择字段（下拉列表）的时间。

现在，我希望时间选择字段下拉选项取决于所选日期。 基本上如果选择星期六和星期日，我希望时间间隔有限（仅限于15:00）。

我已经尝试了很多不同的策略，但它们似乎都不是正确的方法。

以下是两个自定义字段： 

//Datepicker add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_DP' ); function my_custom_checkout_field_DP($checkout) { 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); wp_enqueue_style('datepicker', plugins_url('/css/datepicker.css', __FILE__), '', '', false); /*print('  ' ); print('');*/ echo 'jQuery(document).ready (function(){ jQuery("#e_deliverydate").width("150px"); var formats = ["MM d, yy","MM d, yy"]; jQuery("#e_deliverydate").val("").datepicker({dateFormat: formats[1], minDate:1}); jQuery("#e_deliverydate").parent().after("
"); }); '; echo '
'; woocommerce_form_field('e_deliverydate', array( 'type' => 'text', 'class'=> array('my-field-class form-row-first'), 'label' => __('Your Delivery Date'), 'required' => true, 'placeholder' => __('Pick a date') ), $checkout->get_value('e_deliverydate')); echo '
'; //Time selection field add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_TIME' ); unction my_custom_checkout_field_TIME( $checkout ) { woocommerce_form_field( 'my_custom_field_TIME', array( 'type' => 'select', 'class' => array('my-field-class form-row-wide'), 'label' => __('Your time'), 'required' => true, 'placeholder' => __('Time to pick'), 'options' => array( '10:00' => __( '10:00', 'wps' ), '10:30' => __( '10:30', 'wps' ), '11:00' => __( '11:00', 'wps' ), '11:30' => __( '11:30', 'wps' ), '12:00' => __( '12:00', 'wps' ), '12:30' => __( '12:30', 'wps' ), '13:00' => __( '13:00', 'wps' ), '13:30' => __( '13:30', 'wps' ), '14:00' => __( '14:00', 'wps' ), '14:30' => __( '14:30', 'wps' ), '15:00' => __( '15:00', 'wps' ), '15:30' => __( '15:30', 'wps' ), '16:00' => __( '16:00', 'wps' ), '16:30' => __( '16:30', 'wps' ), '17:00' => __( '17:00', 'wps' ), '17:30' => __( '17:30', 'wps' ), '18:00' => __( '18:00', 'wps' ), ) ), $checkout->get_value( 'my_custom_field_TIME' )); echo '
'; }

任何帮助表示赞赏。

下面的代码将根据结帐页面中jQuery-ui Datepicker字段中选定的日期通过jQuery动态加载时间选择字段选项。

我还为select字段启用了selectWoo （ select2库的克隆）。

我已将您的函数和单独的脚本合并到一个专用的钩子中。

您重新访问的代码： 

 // Register main datepicker jQuery plugin script 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); ## wp_enqueue_style('datepicker', plugins_url('/css/datepicker.css', __FILE__), '', '', false); } // Datepicker field and select time field add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' ); function datepicker_custom_field($checkout) { // $globalText = get_post_meta( $order_parent_id, 'e_deliverydate', true); echo '
'; woocommerce_form_field('delivery_date', array( 'type' => 'text', 'class'=> array('delivery-date-class form-row-first'), 'label' => __('Your Delivery Date'), 'required' => true, 'placeholder' => __('Pick a date') ), $checkout->get_value('delivery_date') ); $options = array('' => __('Time to pick…') ); woocommerce_form_field( 'delivery_time', array( 'type' => 'select', 'class' => array('delivery-time-class form-row-last'), 'label' => __('Your Delivery time'), 'required' => true, 'options' => $options, ), $checkout->get_value( 'delivery_time' ) ); // Restricted options array $options1 = array( '10:00' => __( '10:00', 'wps' ), '10:30' => __( '10:30', 'wps' ), '11:00' => __( '11:00', 'wps' ), '11:30' => __( '11:30', 'wps' ), '12:00' => __( '12:00', 'wps' ), '12:30' => __( '12:30', 'wps' ), '13:00' => __( '13:00', 'wps' ), '13:30' => __( '13:30', 'wps' ), '14:00' => __( '14:00', 'wps' ), '14:30' => __( '14:30', 'wps' ), '15:00' => __( '15:00', 'wps' ), ); // The other part of options array $options2 = array( '15:30' => __( '15:30', 'wps' ), '16:00' => __( '16:00', 'wps' ), '16:30' => __( '16:30', 'wps' ), '17:00' => __( '17:00', 'wps' ), '17:30' => __( '17:30', 'wps' ), '18:00' => __( '18:00', 'wps' ), ); // Merging options arrays $options1 = array_merge($options, $options1); // Partial $options = array_merge($options1,$options2); // Full echo '
'; ?>

代码位于活动子主题（或活动主题）的function.php文件中。 经过测试和工作

在此处输入图像描述

    Interesting Posts

    Magento onepage checkout步骤不扩展

    WooCommerce checkout的时间循环从日期选择器输入字段中选择选项

    Magento一页结帐 – 获取TypeError：checkout undefined（在opcheckout.js中）