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?
Advertisement
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.
- Add a child theme (in this case the Avada Child Theme)
- Copy the
flatpickr.js
script located in/wp-content/plugins/fusion-builder/assets/js/min/library
- Make desired modifications in the copy of
flatpickr.js
- Put the modified version of the
.js
file in the Avada Child Theme directorywp-content/themes/Avada-Child-Theme
- 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);
- Select the Avada Child Theme in WordPress.
That should do the trick.