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.
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?
After doing more research and with help of Avada support, the following steps need to be taken to make modifications to the flatpickr
datepicker.
flatpickr.js
script located in /wp-content/plugins/fusion-builder/assets/js/min/library
flatpickr.js
.js
file in the Avada Child Theme directory wp-content/themes/Avada-Child-Theme
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);
That should do the trick.