Question 165988 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I alter datepicker defaults in WordPress/Avada?

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    you can only use jQuery to set the minimum date.
    you will select the input field ID by jquery and put the flatpicker settings.
    For ex.

    <input type='text' id='form' name='form'>
<script>
jQuery( '#from' ).flatpickr({
    minDate: "today"
});
</script>

    Also, you can add the jQuery code in Avada options on WordPress dashboard.

    enter image description here

    Login or Signup to reply.
  3. 0

    You can use following for Avada and WordPress:

    <script>
jQuery( document ).ready(function($) {
    jQuery('#your_input_selector').flatpickr({
    minDate: "today",
    defaultDate: "today"
    });
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search