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

Question

This post is a follow-up on another question:
Dynamic select field options based on selected day in Woocommerce checkout

So, with this answer help, I did manage to build a dynamic select field on the checkout page, which had changing options, based on the chosen date from a Datepicker. This solution works perfectly on the author test server…

However on my site, the code give some problems if the pickeded date is in May or October. Actually it seems that it doesn't work at all.

Those were and are the main requirements:

If Mon-Fri is chosen, pick-up ('delivery_time') every 30 minutes from 10:00 to 18:00

If Sat-Sun is chosen, pick-up ('delivery_time') every 30 minutes from 10:00 to 15:00

Only first Sundays in month is available. Other Sundays, no options available. (new requirement added in April and was working)

Can this have anything to do with my installation? I've tried to disable all plugins and deactivated localizer for Datepicker as well.

Following is the code for Dynamic select:

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

I have made some little changes in your code:

• I Have moved the jQuery script in footer at the end (as it's the best way for jQuery).
• I have embed all your select options (all different arrays) in a separate utility function.

But I am not sure that it will work on your server configuration... I hope that this will solve the problem (that I don't have on my both test servers configs).

Your code revisited code:

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
}

Code goes in function.php file of your active child theme (or active theme).

I have tested your code on 2 different test servers with WooCommerce 3.2.x and 3.3.x, and it works (tested that on different browsers and platforms).

This issue could be related to your theme, some plugin or other customizations made by you.