如何使用 Avada 主题更改 Wordpress 中的日期选择器默认设置？

Question

Avada 主题似乎使用 flatpickr 作为其 Avada Forms 的默认日期选择器，但无法使用 Avada Builder 更改默认配置。

我想尝试一下 https://flatpickr.js.org/examples/ 中描述的可选参数。至少，我想设置一个最短日期 (minDate)，这样就无法选择昨天的日期。问题是我对 Javascript 和 Wordpress 的幕后知识缺乏了解。我试图编辑位于 wp-content/plugins/fusion-builder/assets/js/min/library/flatpickr.js 的 flatpickr.js 文件，但这是不允许的，我也不知道这是否应该更改默认设置。

在使用 Avada 主题的 Wordpress 中为 flatpickr 设置 minDate 的正确方法是什么？

Answer 1

经过更多研究并在 Avada 支持的帮助下，需要采取以下步骤对 flatpickr 日期选择器进行修改。

添加子主题（在本例中为 Avada 子主题）
复制位于 /wp-content/plugins/fusion-builder/assets/js/min/library

flatpickr.js

在 flatpickr.js
将修改后的.js文件放在Avada Child Theme目录下wp-content/themes/Avada-Child-Theme
修改Avada Child Theme的functions.php文件，添加这段代码：

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 Wordpress 中的 Avada 儿童主题。

这应该可以解决问题。

Answer 2

您只能使用jQuery设置最小日期。您将 select 输入字段 ID jquery 并放置 flatpicker 设置。例如

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

此外，您可以在 Wordpress 仪表板的 Avada 选项中添加 jQuery 代码。

如何使用 Avada 主题更改 Wordpress 中的日期选择器默认设置？

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

javascript

wordpress

flatpickr