Skip to content
Advertisement

How to change datepicker default settings in WordPress using Avada theme?

The Avada theme seems to use flatpickr as the default datepicker for their Avada Forms, but it is not possible to change the default configuration using the Avada Builder.

enter image description here

I would like to play around with the optional parameters as described on https://flatpickr.js.org/examples/. As a minimum, I would like to set a minimum date (minDate) such that the date of yesterday cannot be picked. The problem is that I lack quite some knowledge on Javascript and the behind-the-scenes of WordPress. I have tried to edit the flatpickr.js file located in wp-content/plugins/fusion-builder/assets/js/min/library/flatpickr.js, but this was not permitted and I also do not know if this is how the default settings should be changed at all.

What is the correct way of setting the minDate for flatpickr in WordPress using Avada theme?

Answer

After doing more research and with help of Avada support, the following steps need to be taken to make modifications to the flatpickr datepicker.

  1. Add a child theme (in this case the Avada Child Theme)
  2. Copy the flatpickr.js script located in /wp-content/plugins/fusion-builder/assets/js/min/library
  3. Make desired modifications in the copy of flatpickr.js
  4. Put the modified version of the .js file in the Avada Child Theme directory wp-content/themes/Avada-Child-Theme
  5. Modify the functions.php file of the Avada Child Theme by adding this piece of code:
function ab_dequeue_script() {
    Fusion_Dynamic_JS::dequeue_script( 'fusion-date-picker' );
}
add_action( 'wp_print_scripts', 'ab_dequeue_script', 100 );

function ab_flatpicker_enqueue() {
    wp_enqueue_script(
        'fusion-date-picker',
        get_stylesheet_directory_uri() . '/flatpickr.js',
        [ 'jquery' ],
        '1',
        true
        );
}
add_action( 'wp_enqueue_scripts', 'ab_flatpicker_enqueue', 999);
  1. Select the Avada Child Theme in WordPress.

That should do the trick.

Advertisement