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

Question

I have a checkout field and I want to add date ranges instead of picking a single date. Is it possible to use the snippets from jqueryUI to style it and make it a range of dates? I use this function in Woocommerce checkout page on Wordpress.

Below is my current code in the functions.php where I've added the date.

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

This information is available in the jQueryUI documentation. Here's an example of restricting the user to only allow a date 20 days in the past and 1 month + 20 days into the future. Replace your current $("#datepicker").datepicker(); declaration with the following

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