动态选择字段，基于Woocommerce中的日期选择器选择日期问题

Question

这篇文章是另一个问题的后续：
根据Woocommerce结帐中的选定日期动态选择字段选项

因此，借助此答案帮助，我确实设法在结帐页面上构建了一个动态选择字段，该字段根据日期选择器中选择的日期更改了选项。此解决方案在作者测试服务器上完美运行...

但是在我的网站上，如果选择的日期是 5 月或 10 月，代码会给出一些问题。实际上，它似乎根本不起作用。

这些过去和现在都是主要要求：

如果选择周一至周五，则从10：00至18：00每30分钟接客("delivery_time"(

如果选择周六至周日，则从10：00至15：00每30分钟接客("delivery_time"(

每月的第一个星期日仅可用。其他星期天，没有可用的选项。(4月添加了新要求并正在工作(

这与我的安装有什么关系吗？我也尝试禁用所有插件并停用日期选择器的本地化器。

以下是动态选择的代码：

/**
 * 
 * 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
}

Answer 1

我对你的代码做了一些小的更改：

• 我已经在末尾移动了页脚中的jQuery脚本(因为它是jQuery的最佳方式(。
• 我已将所有选择选项(所有不同的数组(嵌入到一个单独的实用程序函数中。

但我不确定它是否适用于您的服务器配置......我希望这将解决问题(我的两个测试服务器配置都没有(。

您的代码重新访问了代码：

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
}

代码进入函数.php活动子主题(或活动主题(的文件。

我已经使用 WooCommerce 3.2.x 和

3.3.x 在 2 个不同的测试服务器上测试了您的代码，并且可以工作(在不同的浏览器和平台上进行了测试(。

此问题可能与您的主题、某些插件或您进行的其他自定义有关。