在Woocommerce结帐中启用自定义日期范围datepicker

Question

我有一个结帐字段，我想添加日期范围而不是选择一个日期。是否可以使用jqueryUI的片段来设置样式并使其成为一系列日期？我在Wordpress的Woocommerce结帐页面使用此功能。

下面是我在functions.php中的当前代码，其中我添加了日期。

// 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' );
}

// Call datepicker functionality in your custom text field
add_action('woocommerce_before_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) {

    date_default_timezone_set('America/Los_Angeles');
    $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Check In Date').'</h3>';

    echo '
    <script>
        jQuery(function($){
            $("#datepicker").datepicker();
        });
    </script>';

   woocommerce_form_field( 'order_checkin_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Check-in Date'),
        'placeholder'       => __('Select Date'),
        'options'     =>   $mydateoptions
        ),$checkout->get_value( 'order_checkin_date' ));

    echo '</div>';
}

Answer 1

此信息可在jQueryUI documentation中找到。以下是限制用户仅允许过去20天和未来1个月+ 20天的日期的示例。用以下内容替换当前的$("#datepicker").datepicker();声明

<script>
  jQuery( function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  } );
  </script>

Answer 2

要使用jQuery-ui Datepicker启用日期范围，有两种方法：

• 使用2个输入文本字段，将显示每个具有“From”和“To”日期范围的日期选择器。
• 一个独特的内联日期选择器，带有2个隐藏字段，用于“从”和“到”日期范围，like in this answer。

下面基于jQuery-ui datepicker范围official documentation，您将能够在结帐时设置日期范围：

// 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' );
}

// Call datepicker functionality in your custom text field
add_action('woocommerce_before_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) {

    date_default_timezone_set('America/Los_Angeles');

    ?>
    <div id="my_custom_checkout_field">
    <h3><?php _e('Check In Date'); ?><abbr class="required" title="required">*</abbr></h3>
    <?php

   woocommerce_form_field( 'order_in_date', array(
        'type'          => 'text',
        'class'         => array('form-row-first'),
        'id'            => 'from',
        'required'      => true,
        'placeholder'       => __('Select Date in'),
    ),$checkout->get_value( 'order_in_date' ));

    woocommerce_form_field( 'order_out_date', array(
        'type'          => 'text',
        'class'         => array('form-row-last'),
        'id'            => 'to',
        'required'      => true,
        'placeholder'       => __('Select Date out'),
        'clear'         => true
    ),$checkout->get_value( 'order_out_date' ));

    ?>
    </div>

    <script>
        jQuery(function($){
            var dateFormat = "yy/mm/dd",
                from = $( "#from" ).datepicker().on( "change", function() {
                      to.datepicker( "option", "minDate", getDate( this ) );
                }),
                to = $( "#to" ).datepicker().on( "change", function() {
                    from.datepicker( "option", "maxDate", getDate( this ) );
                });

            function getDate( element ) {
                var date;
                try {
                    date = $.datepicker.parseDate( dateFormat, element.value );
                } catch( error ) {
                    date = null;
                }
                return date;
            }
        });
    </script>
    <?php
}

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