phpjquerywordpressdatepicker

No disabled dates in datepicker using php array of dates

I'm trying to take dates from a date field in a custom post type in wordpress and then transfer the dates into an array. Then that array is converted to a js object. That js object is used in a datepicker with beforeShowDay, but it is not working. I get the datepicker but no dates are unavaible.

If I do:

print_r($dates);

in the php part i get: Array ( [0] => 20200829 [1] => 20200821 )

Here is my code:

    $dates = [];
    $args = array('post_type' => 'cus_booking');
    $loop = new WP_Query( $args ); 
    
    while ( $loop->have_posts() ) : $loop->the_post(); 
        the_excerpt(); 
        the_field('start_date');
        array_push($dates,get_field('start_date'));
    endwhile;
    
    ?>
    <input type="text" id="datepicker">

    <script>
        <?php
            $js_array = json_encode($dates);
            echo "var javascript_array = ". $js_array . ";\n";
        ?>
        jQuery(document).ready(function($) {
            $("#datepicker").datepicker({

                beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [ javascript_array.indexOf(string) == -1 ]
                }
        }
        );
        });
</script>

<?php
    wp_reset_postdata(); 
?>
Solution

  • The dates you're getting back from your WP-Query look like "20200829", but in your datepicker code you are trying to compare them to dates of the format 'yy-mm-dd' i.e. they look like "2020-08-29". These are different formats so they will never match.

    You can either:

    1. Change the date format in your datepicker comparison to match the WP_Query dates by using the format yymmdd like this:
        var date_to_check = jQuery.datepicker.formatDate('yymmdd', date);
    1. Reformat your dates from the WP_Query... normally I wouldn't suggest doing this, but it is more usual for a date to have date separators and if you need to use these dates elsewhere in your code, you could just format them as required from the start.

    In that case, you could reformat them in PHP as follows:

    foreach ($dates as $d){
    $date = DateTime::createFromFormat('Ymd', $d);
    $formatted_dates[]  = $date->format('Y-m-d');
}

    And you use it in your datepicker like you already were, e.g.:

    <?php echo "var dates_to_disable = ". json_encode($formatted_dates) . ";\n"; ?>
jQuery(document).ready(function($) {
    $("#datepicker").datepicker({
        beforeShowDay: function(date){
            var date_to_check = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [ dates_to_disable.indexOf(date_to_check) == -1 ];
        }
    });
});

    The main reason I've included this option in my answer is to highlight that PHP and the jQuery datepicker have different ways for formatting the date strings.

    So for example in the code above, to make dates look like "2020-08-29":