I added 2 custom fields: date and hour to the WooCommerce checkout page (by editing functions.php)
<?php
add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_date', 10, 1 );
function my_custom_checkout_field_date( $checkout2 ) {
woocommerce_form_field( 'delivery_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'id' => 'date',
'label' => __('Afhaaldatum'),
'required' => true,
'placeholder' => __('Kies een datum'),
'description' => 'Een datum kiezen',
), $checkout2->get_value( 'delivery_date' ));
}
add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_hour', 10, 1 );
function my_custom_checkout_field_hour( $checkout ) {
woocommerce_form_field( 'delivery_hour', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide wooccm-required-field'),
'id' => 'hour',
'label' => __('Afhaaltijd'),
'required' => true,
'description' => 'Een uur kiezen',
'default' => '17:00',
), $checkout->get_value( 'delivery_hour' ));
}
?>
Then I’m using jQuery UI to transform these 2 fields to datepicker and timepicker.
What I would like to do is when we select a date using the timepicker, we get the date value (trigger event: when we click on the hour field), if the day of the selected date is friday or saturday, then the maxTime is set to 22:30, otherwise the maxTime is set to 22:00 only. Right now, it works just once, but if I reselect another date, the date value won’t be changed, how can I get the date value every time I choose a date? Thank you!
jQuery("input#hour").click(function(){
var selectDate = jQuery("input#date").val();
var strToDate =new Date(selectDate);
var selectDay = strToDate.getDay();
// Day = 5 || Day = 6 : Friday or Saturday : 17:00-22:30
if(selectDay == 5 || selectDay == 6){
jQuery('input#hour').timepicker({
controlType: 'select',
oneLine: true,
stepHour: 1,
stepMinute: 15,
hourMin: 17,
hourMax: 22,
minTime: '17:00',
maxTime: '22:30'
});
}else{ // Other days : 17:00-22:00
jQuery('input#hour').timepicker({
controlType: 'select',
oneLine: true,
stepHour: 1,
stepMinute: 15,
hourMin: 17,
hourMax: 22,
minTime: '17:00',
maxTime: '22:00'
});
}
});