Disable dates and days of the week in ACF date picker

Question

I have found lots of topics about the (jQuery) Datepicker but not the specific ACF way I am looking for.

The following is a perfectly working code to set max selected dates in the past and in the future within ACF but I need 2 more functions but can't figure out how to implement them.

How do I:

Disable specific future dates?
Disable specific week days (f.i. Sundays)?

within the example code below?

function yl_date_picker_customizations() {
    ?>
    <script type="text/javascript">
        (function($) {

            // JS here

            acf.add_filter('date_picker_args', function( args, $field ){

                // do something to args
                args['minDate'] = '0';  //For example, "+1m +7d" represents one month and seven days from today.
                args['maxDate'] = '30';


                return args;

            });

        })(jQuery); 
    </script>
    <?php       
}

add_action('acf/input/admin_footer', 'yl_date_picker_customizations');

score 0 · Accepted Answer · answered Jun 09 '20 at 13:09

Here's the working code :)

// Customization to reservation dates via datepicker
function yl_datepicker_customizations() {
    ?>
        <script type="text/javascript">
            (function($) {

                var arrDisabledDates = {};
                arrDisabledDates[new Date('06/19/2020')] = new Date('06/19/2020');
                arrDisabledDates[new Date('06/30/2020')] = new Date('06/30/2020');

                acf.add_filter('date_picker_args', function( args, $field ){

                    // do something to args
                    args['minDate']             = '0';  //For example, "+1m +7d" represents one month and seven days from today.
                    args['maxDate']             = '60';
                    args['beforeShowDay']       = function (date) {
                        var day = date.getDay(),
                        bDisable = arrDisabledDates[date];
                        if (bDisable) return [false, '', '']
                        else return [(day != 4) && (day != 2)]
                    }

                    return args;

                });

            })(jQuery);

        </script>
    <?php       
}

add_action('acf/input/admin_footer', 'yl_datepicker_customizations');

Disable dates and days of the week in ACF date picker

1 Answers1