Site icon Hip-Hop Website Design and Development

Timepicker maxTime based on selected day

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

});