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