Search code examples
javascriptdatepickeradvanced-custom-fieldsjquery-ui-datepickeracfpro

Disable dates and days of the week in ACF date picker


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

Solution

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