Datetimepicker

Datetimepicker — скрипт для создания продвинутого поля ввода даты и времени. Здесь буду рассматривать решение от Kartik Visweswaran.

Для работы необходимо подключить сам скрипт и стили: jquery.datetimepicker.full.min, jquery.datetimepicker.min

Инициализация скрипта

Для запуска скрипта необходимо выбрать язык и указать для какого поля его включить (изначально поле лучше делать текстовым):

jQuery.datetimepicker.setLocale('ru');

jQuery('#delivery_date').datetimepicker({
	dayOfWeekStart:1, // неделя начинается с ПН
	//timepicker:false,
	closeOnDateSelect:0, // нужно выбрать и дату и время
	format:'d.m.Y H:i',
	minDate:'+1970/01/02',
	minTime:'09:00',
	maxTime:'21:00',
	step:30
});

Поле Дата доставки для WC

Переходим к частностям. Нужно например завести поле Дата Доставки (в полях Доставки), заодно заведем поле Количество персон (в полях Оплаты). Заводим, выводим, сохраняем поля и выводим значения:

// Добавляем произвольные поля
add_filter( 'woocommerce_checkout_fields' , 'number_persone_checkout_fields' );
function number_persone_checkout_fields( $fields ) {
	
     $fields['billing']['number_persone'] = array(
		'label'     => __('Количество человек', 'woocommerce'),
		'placeholder'   => _x('Количество человек', 'placeholder', 'woocommerce'),
		'required'  => true,
		'class'     => array('form-row-wide'),
		'clear'     => true
     );
	
	 $fields['shipping']['delivery_date'] = array(
		'label'     => __('Дата и время доставки', 'woocommerce'),
		'placeholder'   => _x('Дата и время доставки', 'placeholder', 'woocommerce'),
		'required'  => true,
		'class'     => array('form-row-wide'),
		'clear'     => true
     );

     return $fields;
}

// Выводим поля
add_action( 'woocommerce_admin_order_data_after_billing_address', 'delivery_date_display_admin_order_meta', 10, 1 );
function delivery_date_display_admin_order_meta($order){
	echo '<p><strong>'.__('Количество человек').':</strong> ' . get_post_meta( $order->get_id(), 'number_persone', true ) . '</p>';
    echo '<p><strong>'.__('Дата и время доставки').':</strong> ' . get_post_meta( $order->get_id(), 'delivery_date', true ) . '</p>';
}

// Сохранить значения полей
add_action( 'woocommerce_checkout_update_order_meta', 'number_persone_update_order_meta' );
function number_persone_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['number_persone'] ) ) {
        update_post_meta( $order_id, 'number_persone', sanitize_text_field( $_POST['number_persone'] ) );
    }
	if ( ! empty( $_POST['delivery_date'] ) ) {
        update_post_meta( $order_id, 'delivery_date', sanitize_text_field( $_POST['delivery_date'] ) );
    }
}


// Выводим поля в Благодарность о заказе
add_action( 'woocommerce_order_details_after_customer_details', 'delivery_date_echo_in_order' );
function delivery_date_echo_in_order( $order ) {
	echo 'Дата и время доставки: '.get_post_meta( $order->get_id(), 'delivery_date', true ).'<br>';
	echo 'Количество человек: '.get_post_meta( $order->get_id(), 'number_persone', true ).'<br>';
}


// Выводим поля в шаблоне письма
add_filter('woocommerce_email_order_meta_keys', 'number_persone_order_meta_keys');
function number_persone_order_meta_keys( $keys ) {
	 $keys['Дата и время доставки'] = 'delivery_date';
	 $keys['Количество человек'] = 'number_persone';	
     return $keys;
}

Для поля Дата и время доставки инициируем скрипт с условием, что если клиент заказывает до 16:00, то он может сделать заказ со следующего дня, если после, то самое раннее на послезавтра:

jQuery.datetimepicker.setLocale('ru');

var dtToday = new Date();
var hour = dtToday.getHours();

if(hour < 16) { //если меньше 16 часов, то можно заказать на завтра
	
	jQuery('#delivery_date').datetimepicker({
		dayOfWeekStart:1, // неделя начинается с ПН
		//timepicker:false,
		closeOnDateSelect:0, // нужно выбрать и дату и время
		format:'d.m.Y H:i',
		minDate:'+1970/01/02',
		minTime:'09:00',
		maxTime:'21:00',
		step:30
	});	
	
} else { //если больше 16 часов, то можно заказать только на послезавтра
	
	jQuery('#delivery_date').datetimepicker({
		dayOfWeekStart:1, // неделя начинается с ПН
		//timepicker:false,
		closeOnDateSelect:0, // нужно выбрать и дату и время
		format:'d.m.Y H:i',
		minDate:'+1970/01/03',
		minTime:'09:00',
		maxTime:'21:00',
		step:30
	});	
	
}

Для ускорения загрузки сайта подключаем скрипты только для страницы оформления:

if ( is_checkout() ) { wp_enqueue_script( 'datetimepicker', get_template_directory_uri() . '/js/jquery.datetimepicker.full.min.js' , array( ), '1.0' , true ); }

if ( is_checkout() ) { wp_enqueue_style( 'datetimepicker', get_template_directory_uri() . '/css/jquery.datetimepicker.min.css' , array( ), '1.0' , 'screen' ); }

Таким же образом лучше присоединять и вышеупомянутый скрипт:

function datetimepicker_load_script() {
	if ( is_checkout() ) { 	
		print '<script>
		jQuery.datetimepicker.setLocale("ru");

		var dtToday = new Date();
		var hour = dtToday.getHours();

		if(hour < 16) { //если меньше 16 часов, то можно заказать на завтра

			jQuery("#delivery_date").datetimepicker({
				dayOfWeekStart:1, // неделя начинается с ПН
				//timepicker:false,
				closeOnDateSelect:0, // нужно выбрать и дату и время
				format:"d.m.Y H:i",
				minDate:"+1970/01/02",
				minTime:"09:00",
				maxTime:"21:00",
				step:30
			});	

		} else { //если больше 16 часов, то можно заказать тоьлко на послезавтра

			jQuery("#delivery_date").datetimepicker({
				dayOfWeekStart:1, // неделя начинается с ПН
				//timepicker:false,
				closeOnDateSelect:0, // нужно выбрать и дату и время
				format:"d.m.Y H:i",
				minDate:"+1970/01/03",
				minTime:"09:00",
				maxTime:"21:00",
				step:30
			});	

		}
		</script>';
	}
}
add_action('body-before', 'datetimepicker_load_script'); 

[site-socialshare]