Php 选择商业交付方式后选择日期和时间
在选择交货方式后，我需要选择产品的交货时间和日期，并将这些字段放置在Php 选择商业交付方式后选择日期和时间,php,jquery,datetime,woocommerce,checkout,Php,Jquery,Datetime,Woocommerce,Checkout,在选择交货方式后，我需要选择产品的交货时间和日期，并将这些字段放置在woocommerce\u after\u shipping\u rate中 在我看来。客户选择送货方式，例如“快递” 之后，将出现两个复选框： 尽快 交货日期 如果客户选择“交货日期”，则会出现一个新字段，其中包含交货日期和时间。这就是为什么 根据“”答案代码，我为交货日期和时间、“尽快”和“交货日期”添加了其他字段。我从下载了DateTimePicker 这是我的密码： // Register main datetimepi
woocommerce\u after\u shipping\u rate// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {
// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;
// Load the datetimepicker jQuery-ui plugin script
wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array());
}
// Call datetimepicker 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('Europe');
$mydateoptions = array('' => __('', 'woocommerce' ));
echo '<div id="my_custom_checkout_field">
<h3>'.__('Delivery Info').'</h3>';
echo '
<script>
jQuery(function($){
$("#datetimepicker").datetimepicker({format:\'d.m.Y H:i\', allowTimes:[
\'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
\'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
\'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
});
});
</script>';
// Checkbox ASAP
woocommerce_form_field( 'order_delivery_asap', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('As Soon As Possible'),
'checked' => '',
'default' => 0,
), $checkout->get_value( 'order_delivery_asap' ));
// Checkbox Delivery Date
woocommerce_form_field( 'order_delivery_date', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('Delivery Date'),
'checked' => '',
'default' => 0,
), $checkout->get_value( 'order_delivery_date' ));
// DateTimePicker
woocommerce_form_field( 'order_pickup_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'id' => 'datetimepicker',
'required' => false,
'label' => __('Select date'),
'placeholder' => __(''),
'options' => $mydateoptions
),$checkout->get_value( 'order_pickup_date' ));
echo '</div>';
}
//注册主datetimepicker jQuery插件脚本
添加动作（'wp_排队_脚本'，'enabling_date_time_picker'）；
函数启用\u日期\u时间\u选择器（）{
//仅在前端和签出页面上
if（is_admin（）| |！is_checkout（））返回；
//加载datetimepicker jQuery ui插件脚本
wp_enqueue_style（'datetimepicker'，get_stylesheet_directory_uri（）。/assets/css/jquery.datetimepicker.min.css'，array（））；
wp_enqueue_脚本（'datetimepicker'，get_stylesheet_directory_uri（）。/js/jquery.datetimepicker.full.min.js'，array（））；
}
//在自定义文本字段中调用datetimepicker功能
添加操作（'WOOMerce\u在订单\u注释之前，'my\u custom\u checkout\u field'，10，1）；
函数my_custom_checkout_字段（$checkout）{
日期默认时区设置（“欧洲”）；
$mydateoptions=array（''=>_u（'''woocommerce'）；
回声'
“.”（“交货信息”）；
回声'
jQuery（函数（$）{
$（“#datetimepicker”）.datetimepicker（{格式：\'d.m.Y H:i\'，允许时间：[
\'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
\'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
\'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
});
});
';
//复选框尽快
woocommerce\u form\u字段（'order\u delivery\u asap'，数组(
'键入'=>'复选框'，
'class'=>array（'my-field-class表单行宽'），
“label'=>\（“尽快”），
'选中'=>''，
“默认值”=>0，
)，$checkout->get_value（'order_delivery_asap'）；
//复选框交货日期
woocommerce\u表单\u字段（'order\u delivery\u date'，数组(
'键入'=>'复选框'，
'class'=>array（'my-field-class表单行宽'），
“标签”=>（交货日期），
'选中'=>''，
“默认值”=>0，
)，$checkout->get_value（'order_delivery_date'）；
//日期时间选择器
woocommerce\u form\u字段（'order\u Pick\u date'，数组(
'类型'=>'文本'，
'class'=>array（'my-field-class表单行宽'），
'id'=>'datetimepicker'，
“必需”=>false，
“标签”=>（选择日期），
“占位符”=>”，
“选项”=>$mydateoptions
)，$checkout->get_value（'order_-picku_-date'）；
回声'；
}
我将为你的帮助而高兴 改用单选按钮
woocommerce_form_field( 'order_delivery_method', array(
'type' => 'radio',
'class' => array('my-field-class form-row-wide'),
'options' => array(
'method_asap' => __('As Soon As Possible'),
'method_date' => __('Select Delivery Date'),
),
), $checkout->get_value('order_delivery_method'));
woocommerce_form_field( 'order_delivery_date', array(
'id' => 'DeliveryDatePicker',
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Delivery Date'),
'default' => 0,
), $checkout->get_value( 'order_delivery_date' ));
$("#DeliveryDatePicker").hide();
$("input[name='order_delivery_method']").click(function () {
if($(this).val() == 'method_date') {
$("#DeliveryDatePicker").show();
} else {
$("#DeliveryDatePicker").hide();
}
});
// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {
// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;
// Load the datetimepicker jQuery-ui plugin script
wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array());
}
// Call datetimepicker 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('Europe');
$mydateoptions = array('' => __('', 'woocommerce' ));
echo '<div id="my_custom_checkout_field">
<h3>'.__('Delivery Info').'</h3>';
echo '
<script>
$("#DeliveryDatePicker").hide();
$("input[name=\'order_delivery_method\']").click(function () {
if($(this).val() == 'method_date') {
$("#DeliveryDatePicker").show();
} else {
$("#DeliveryDatePicker").hide();
}
});
jQuery(function($){
$("#DeliveryDatePicker").datetimepicker({format:\'d.m.Y H:i\', allowTimes:[
\'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
\'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
\'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
});
});
</script>';
woocommerce_form_field( 'order_delivery_method', array(
'type' => 'radio',
'class' => array('my-field-class form-row-wide'),
'options' => array(
'method_asap' => __('As Soon As Possible'),
'method_date' => __('Select Delivery Date'),
),
), $checkout->get_value('order_delivery_method'));
woocommerce_form_field( 'order_delivery_date', array(
'id' => 'DeliveryDatePicker',
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Delivery Date'),
'default' => 0,
), $checkout->get_value( 'order_delivery_date' ));
echo '</div>';
}
//注册主datetimepicker jQuery插件脚本
添加动作（'wp_排队_脚本'，'enabling_date_time_picker'）；
函数启用\u日期\u时间\u选择器（）{
//仅在前端和签出页面上
if（is_admin（）| |！is_checkout（））返回；
//加载datetimepicker jQuery ui插件脚本
wp_enqueue_style（'datetimepicker'，get_stylesheet_directory_uri（）。/assets/css/jquery.datetimepicker.min.css'，array（））；
wp_enqueue_脚本（'datetimepicker'，get_stylesheet_directory_uri（）。/js/jquery.datetimepicker.full.min.js'，array（））；
}
//在自定义文本字段中调用datetimepicker功能
添加操作（'WOOMerce\u在订单\u注释之前，'my\u custom\u checkout\u field'，10，1）；
函数my_custom_checkout_字段（$checkout）{
日期默认时区设置（“欧洲”）；
$mydateoptions=array（''=>_u（'''woocommerce'）；
回声'
“.”（“交货信息”）；
回声'
$（“#DeliveryDatePicker”）.hide（）；
$（“输入[name=\'order\u delivery\u method\']）。单击（函数（）{
if（$（this）.val（）=='method\u date'）{
$（“#DeliveryDatePicker”）.show（）；
}否则{
$（“#DeliveryDatePicker”）.hide（）；
}
});
jQuery（函数（$）{
$（“#DeliveryDatePicker”）.datetimepicker（{格式：\'d.m.Y H:i\'，允许时间：[
\'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
\'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
\'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
});
});
';
woocommerce\u表单\u字段（'order\u delivery\u method'，数组(
'类型'=>'无线电'，
'class'=>array（'my-field-class表单行宽'），
“选项”=>数组(
“方法尽快”=>“尽快”，
'method_date'=>方法（选择交货日期），
),
)，$checkout->get_value（'order_delivery_method'）；
woocommerce\u表单\u字段（'order\u delivery\u date'，数组(
'id'=>'DeliveryDatePicker'，
'类型'=>'文本'，
'class'=>array（'my-field-class表单行宽'），
“标签”=>（交货日期），
“默认值”=>0，
)，$checkout->get_value（'order_delivery_date'）；
回声'；
}
- 显示/隐藏日期时间选择器字段，具体取决于
// Register main datetimepicker jQuery plugin script add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' ); function enabling_date_time_picker() { // Only on front-end and checkout page if( is_checkout() && ! is_wc_endpoint_url() ) : // Load the datetimepicker jQuery-ui plugin script wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array()); wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array('jquery'), '1.0', false ); endif; } // Display custom checkout fields (+ datetime picker) add_action('woocommerce_before_order_notes', 'display_custom_checkout_fields', 10, 1 ); function display_custom_checkout_fields( $checkout ) { // Define the time zone date_default_timezone_set('Europe/Paris'); // <== Set the time zone (http://php.net/manual/en/timezones.php) echo '<div id="my_custom_checkout_field"> <h3>'.__('Delivery Info').'</h3>'; // Hide datetimepicker container field echo'<style> #datetimepicker_field.off { display:none; } </style>'; // Checkbox ASAP woocommerce_form_field( 'delivery_asap', array( 'type' => 'checkbox', 'class' => array('my-field-class form-row-wide'), 'label' => __("As Soon As Possible", "woocommerce"), 'checked' => '', 'default' => 0, ), ''); // Checkbox Delivery Date woocommerce_form_field( 'delivery_option', array( 'type' => 'checkbox', 'class' => array('my-field-class form-row-wide'), 'label' => __("Choose a delivery Date", "woocommerce"), 'checked' => '', 'default' => 0, ), ''); // DateTimePicker woocommerce_form_field( 'delivery_date', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide off'), 'id' => 'datetimepicker', 'required' => false, 'label' => __('Select date'), 'placeholder' => __(''), 'options' => array('' => __('', 'woocommerce' )) ),''); echo '</div>'; } // The jQuery script add_action( 'wp_footer', 'checkout_delivery_jquery_script'); function checkout_delivery_jquery_script() { // Only on front-end and checkout page if( is_checkout() && ! is_wc_endpoint_url() ) : ?> <script> jQuery(function($){ var a = 'input[name="delivery_asap"]', c = 'input[name="delivery_option"]', d = '#datetimepicker', f = d+'_field'; $(f).hide(); $(a).prop('checked', true); // First checkbox $(a).change(function(){ if( $(this).prop('checked') == true ){ $(f).hide(); $(c).prop('checked', false); } else { $(f).show(); $(c).prop('checked', true); } }); // Second checkbox $(c).change(function(){ if( $(this).prop('checked') == true ){ $(f).show(); $(a).prop('checked', false); } else { $(f).hide(); $(a).prop('checked', true); } }); $(d).datetimepicker({ format: 'd.m.Y H:i', allowTimes:[ '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30'] }); }); </script> <?php endif; } // Check that the delivery date is not empty when it's selected add_action( 'woocommerce_checkout_process', 'check_datetimepicker_field' ); function check_datetimepicker_field() { if ( isset($_POST['delivery_option']) && empty($_POST['delivery_date']) ) { wc_add_notice( __( 'Error: You must choose a delivery date and time', 'woocommerce' ), 'error' ); } } // Check that the delivery date is not empty when it's selected add_action( 'woocommerce_checkout_create_order', 'save_order_delivery_data', 10, 2 ); function save_order_delivery_data( $order, $data ) { if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] && ! empty($_POST['delivery_date']) ) { $order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_date'] ) ); $order->update_meta_data( '_delivery_option', 'date' ); } elseif( isset($_POST['delivery_asap']) && $_POST['delivery_asap'] ) { $order->update_meta_data( '_delivery_option', 'azap' ); } }// Register main datetimepicker jQuery plugin script add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' ); function enabling_date_time_picker() { // Only on front-end and checkout page if( is_checkout() && ! is_wc_endpoint_url() ) : // Load the datetimepicker jQuery-ui plugin script wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array()); wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array('jquery'), '1.0', false ); endif; } // Display custom checkout fields (+ datetime picker) add_action('woocommerce_before_order_notes', 'display_custom_checkout_fields', 10, 1 ); function display_custom_checkout_fields( $checkout ) { // Define the time zone date_default_timezone_set('Europe/Paris'); // <== Set the time zone (http://php.net/manual/en/timezones.php) echo '<div id="my_custom_checkout_field"> <h3>'.__('Delivery Info').'</h3>'; // Hide datetimepicker container field echo'<style> #datetimepicker_field.off { display:none; } </style>'; // Radio buttons field: Selected option woocommerce_form_field( 'delivery_option', array( 'type' => 'radio', 'class' => array('my-field-class form-row-wide'), 'options' => array( 'asap' => __('As Soon As Possible'), 'date' => __('Select Delivery Date'), ), ), 'asap' ); // DateTimePicker woocommerce_form_field( 'delivery_date', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide off'), 'id' => 'datetimepicker', 'required' => false, 'label' => __('Select date'), 'placeholder' => __(''), 'options' => array('' => __('', 'woocommerce' )) ),''); echo '</div>'; } // The jQuery script add_action( 'wp_footer', 'checkout_delivery_jquery_script'); function checkout_delivery_jquery_script() { // Only on front-end and checkout page if( is_checkout() && ! is_wc_endpoint_url() ) : ?> <script> jQuery(function($){ var d = '#datetimepicker', f = d+'_field', r = 'input[name="delivery_option"]'; $(f).hide(); // On radio button change $(r).change(function(){ if( $(this).val() == 'date' ){ $(f).show(); } else { $(f).hide(); } }); // Enable the datetime picker field $(d).datetimepicker({ format: 'd.m.Y H:i', allowTimes:[ '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30'] }); }); </script> <?php endif; } // Check that the delivery date is not empty when it's selected add_action( 'woocommerce_checkout_process', 'check_datetimepicker_field' ); function check_datetimepicker_field() { if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] === 'date' && isset($_POST['delivery_date']) && empty($_POST['delivery_date']) ) { wc_add_notice( __( 'Error: You must choose a delivery date and time', 'woocommerce' ), 'error' ); } } // Check that the delivery date is not empty when it's selected add_action( 'woocommerce_checkout_create_order', 'save_order_delivery_data', 10, 2 ); function save_order_delivery_data( $order, $data ) { if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] == 'date' && ! empty($_POST['delivery_date']) ) { $order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_date'] ) ); } if( isset($_POST['delivery_option']) ) { $order->update_meta_data( '_delivery_option', esc_attr( $_POST['delivery_option'] ) ); } }$delivery_option = $order->get_meta('_delivery_option'); if( $delivery_option == 'date' ) { $delivery_datetime = $order->get_meta('_delivery_datetime'); }$delivery_option = get_post_meta($order_id, '_delivery_option', true); if( $delivery_option == 'date' ) { $delivery_datetime = get_post_meta($order_id, '_delivery_datetime', true); }