[英]Enable a custom date range datepicker in Woocommerce checkout
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?
是否可以使用jqueryUI的代码片段设置其样式并使其具有一定的日期范围? I use this function in Woocommerce checkout page on Wordpress.
我在Wordpress的Woocommerce结帐页面中使用此功能。
Below is my current code in the functions.php where I've added the date. 以下是我在其中添加日期的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>';
}
This information is available in the jQueryUI documentation . jQueryUI文档中提供了此信息。 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.
这是一个示例,它限制用户只允许过去20天和1个月+ 20天以后的日期。 Replace your current
$("#datepicker").datepicker();
替换当前的
$("#datepicker").datepicker();
declaration with the following 声明如下
<script>
jQuery( function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
} );
</script>
To enable a date range with jQuery-ui Datepicker, there is 2 ways: 要使用jQuery-ui Datepicker启用日期范围,有两种方法:
Here Below based on jQuery-ui datepicker range official documentation , you will be able to set a date range in checkout: 在下面根据jQuery-ui datepicker range的官方文档 ,您将能够在结帐中设置日期范围:
// 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
}
Code goes in function.php file of your active child theme (or active theme). 代码进入您的活动子主题(或活动主题)的function.php文件中。 Tested and works.
经过测试和工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.