Dynamic select field, based on Datepicker chosen date issue in Woocommerce - php

Question

This post is a follow-up on another question:
Dynamic select field options based on selected day in Woocommerce checkout
So, with this answer help, I did manage to build a dynamic select field on the checkout page, which had changing options, based on the chosen date from a Datepicker. This solution works perfectly on the author test server…
However on my site, the code give some problems if the pickeded date is in May or October. Actually it seems that it doesn't work at all.
Those were and are the main requirements:
If Mon-Fri is chosen, pick-up ('delivery_time') every 30 minutes from 10:00 to 18:00
If Sat-Sun is chosen, pick-up ('delivery_time') every 30 minutes from 10:00 to 15:00
Only first Sundays in month is available. Other Sundays, no options available. (new requirement added in April and was working)
Can this have anything to do with my installation? I've tried to disable all plugins and deactivated localizer for Datepicker as well.
Following is the code for Dynamic select:
/**
*
* 2018-04-16
* Picking date and time
* Dynamic select based on selected day
*
*/
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' );
wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}
// Datepicker field and select time field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
echo '<div id="date-time-wrapper">';
woocommerce_form_field('delivery_date', array(
'type' => 'text',
'class'=> array('delivery-date-class form-row-first'),
'label' => __('Vælg dato for afhentning'),
'required' => true,
//'placeholder' => __('Pick a date')
), $checkout->get_value('delivery_date') );
$options = array('' => __('Afhentning kl.') );
woocommerce_form_field( 'delivery_time', array(
'type' => 'select',
'class' => array('delivery-time-class form-row-last'),
'label' => __('Vælg tidspunkt for afhentning'),
'required' => true,
'options' => $options,
), $checkout->get_value( 'delivery_time' ) );
// Restricted options array
$options1 = array(
'10:00' => __( '10:00' ),
'10:30' => __( '10:30' ),
'11:00' => __( '11:00' ),
'11:30' => __( '11:30' ),
'12:00' => __( '12:00' ),
'12:30' => __( '12:30' ),
'13:00' => __( '13:00' ),
'13:30' => __( '13:30' ),
'14:00' => __( '14:00' ),
'14:30' => __( '14:30' ),
'15:00' => __( '15:00' ),
);
// The other part of options array
$options2 = array(
'15:30' => __( '15:30' ),
'16:00' => __( '16:00' ),
'16:30' => __( '16:30' ),
'17:00' => __( '17:00' ),
'17:30' => __( '17:30' ),
'18:00' => __( '18:00' ),
);
// The third part of options array
$options3 = array(
'Sundays_Closed' => __( 'Åbent første søndag i måneden'),
);
// Merging options arrays
$options1 = array_merge($options, $options1); // Partial
$options = array_merge($options1,$options2); // Full
echo '<br clear="all"></div>';
?>
<script language="javascript">
jQuery( function($){
var a = <?php echo json_encode($options); ?>,
b = <?php echo json_encode($options1); ?>,
e = <?php echo json_encode($options3); ?>,
c = new Date(),
s = 'select#delivery_time';
// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var o = '';
$.each( opt, function( key, value ){
o += '<option value="'+key+'">'+value+'</option>';
});
$(s).html(o);
}
// Once DOM is loaded
//Only open first Sunday in month
if( c.getDay() == 0 && c.getDate() > 7 ){
dynamicSelectOptions( e );
}
else if( c.getDay() == 6 || c.getDay() == 0){
dynamicSelectOptions( b );
}
else
dynamicSelectOptions( a );
// Select time to selectWoo
$(s).selectWoo();
// Datepicker
$('#delivery_date').datepicker({
dateFormat: 'd MM, y',
minDate:1,
maxDate:new Date(2018, 12),
onSelect: function(){
// Live event: On selected date event
var d = new Date($(this).val());
//Only first Sunday in month open
if( d.getDay() == 0 && d.getDate() > 7 ){
dynamicSelectOptions( e );
}
else if( d.getDay() == 6 || d.getDay() == 0){
dynamicSelectOptions( b );
}
else
dynamicSelectOptions( a );
}
}).parent().after('<div id="order-desc"></div>');
});
</script>
<?php
}

Answer 1

I have made some little changes in your code:
I Have moved the jQuery script in footer at the end (as it's the best way for jQuery).
I have embed all your select options (all different arrays) in a separate utility function.
But I am not sure that it will work on your server configuration... I hope that this will solve the problem (that I don't have on my both test servers configs).
Your code revisited code:
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' );
wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}
// Utility function (with all option arrays)
function select_options( $type = '' ){
$options = array('' => __('Afhentning kl.') ); // Default start
$options1 = array( // Restricted options array
'10:00' => __( '10:00' ), '10:30' => __( '10:30' ), '11:00' => __( '11:00' ),
'11:30' => __( '11:30' ), '12:00' => __( '12:00' ), '12:30' => __( '12:30' ),
'13:00' => __( '13:00' ), '13:30' => __( '13:30' ), '14:00' => __( '14:00' ),
'14:30' => __( '14:30' ), '15:00' => __( '15:00' ),
);
$options2 = array( // complementary options array
'15:30' => __( '15:30' ), '16:00' => __( '16:00' ), '16:30' => __( '16:30' ),
'17:00' => __( '17:00' ), '17:30' => __( '17:30' ),'18:00' => __( '18:00' ),
);
if( $type == 'partial' ){
return array_merge($options, $options1); // Partial;
} elseif ( $type == 'full' ){
return array_merge($options,$options1,$options2); // Full
} elseif ( $type == 'close' ){
return array( 'Sundays_Closed' => __( 'Åbent første søndag i måneden') ); // Sundays closed
} else {
return $options; // Default (start)
}
}
// Checkout Datepicker field and select time field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
echo '<div id="date-time-wrapper">';
woocommerce_form_field('delivery_date', array(
'type' => 'text',
'class'=> array('delivery-date-class form-row-first'),
'label' => __('Vælg dato for afhentning'),
'required' => true,
//'placeholder' => __('Pick a date')
), $checkout->get_value('delivery_date') );
$options = select_options();
woocommerce_form_field( 'delivery_time', array(
'type' => 'select',
'class' => array('delivery-time-class form-row-last'),
'label' => __('Vælg tidspunkt for afhentning'),
'required' => true,
'options' => $options,
), $checkout->get_value( 'delivery_time' ) );
echo '<br clear="all"></div>';
}
add_action( 'wp_footer', 'date_picker_js_script' );
function date_picker_js_script() {
// Only on checkout page
if( ! is_checkout() ) return;
?>
<script language="javascript">
jQuery( function($){
var a = <?php echo json_encode(select_options('full')); ?>,
b = <?php echo json_encode(select_options('partial')); ?>,
e = <?php echo json_encode(select_options('close')); ?>,
c = new Date(),
s = 'select#delivery_time';
// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var o = '';
$.each( opt, function( key, value ){
o += '<option value="'+key+'">'+value+'</option>';
});
$(s).html(o);
}
// ===> Just for testing - To be removed
console.log('Day: '+c.getDay()+' | Date: '+c.getDate());
// 1. Once DOM is loaded
if( c.getDay() == 0 && c.getDate() > 7 ){ // Only open first Sunday in month
dynamicSelectOptions( e );
} else if( c.getDay() == 6 || c.getDay() == 0){ // Weekends
dynamicSelectOptions( b );
} else { // all others days
dynamicSelectOptions( a );
}
// Select time to selectWoo
$(s).selectWoo();
// Datepicker
$('#delivery_date').datepicker({
dateFormat: 'd MM, y',
minDate:1,
maxDate:new Date(2018, 12),
onSelect: function(){
// On live calendar event: On selected date event
var d = new Date($(this).val());
// ===> Just for testing - To be removed
console.log('Day: '+d.getDay()+' | Date: '+d.getDate());
if( d.getDay() == 0 && d.getDate() > 7 ) { // Only first Sunday in month open
dynamicSelectOptions( e );
} else if( d.getDay() == 6 || d.getDay() == 0) { // Weekends
dynamicSelectOptions( b );
} else { // all others days
dynamicSelectOptions( a );
}
}
}).parent().after('<div id="order-desc"></div>');
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme).
I have tested your code on 2 different test servers with WooCommerce 3.2.x and 3.3.x, and it works (tested that on different browsers and platforms).
This issue could be related to your theme, some plugin or other customizations made by you.