Contact Form 7 上的日历字段：如何使它在该字段的任何位置都可点击？答案

【问题标题】：Calendar field on Contact Form 7: how can I make it clickable everywhere in the field?Contact Form 7 上的日历字段：如何使它在该字段的任何位置都可点击？
【发布时间】：2021-07-16 11:46:04
【问题描述】：

到目前为止，我只能通过单击日期字段右侧的日历图标来显示日历。我想单击字段上的任意位置并显示日历。我怎样才能做到这一点？非常感谢！

【问题讨论】：

你是如何显示你的日历图标的？你在用插件吗？

标签： html css wordpress contact-form-7

【解决方案1】：

您所称的日历字段使用<input type="date"> HTML 属性，该属性在大多数浏览器上显示日历。

将此函数添加到您的functions.php 或作为插件将在不使用jQuery UI 的情况下将常规文本字段变为日历弹出窗口。

使用包含 class:use-datepicker 的表单标签

Date: [text your-date class:use-datepicker]

此功能只会在使用联系表单 7 短代码的页面上将脚本和样式排入队列。

function dd_add_datepicker_to_cf7() {
    $load_scripts = false;
    if ( is_singular() ) {
        $post = get_post();
        if ( has_shortcode( $post->post_content, 'contact-form-7' ) ) {
            $load_scripts = true;
        }
    }
    if ( $load_scripts ) {
        wp_enqueue_script( 'jquery-ui-datepicker' ); // included with WordPress
        wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
        // Choose a different theme is you want https://cdnjs.com/libraries/jqueryui
        wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/theme.min.css' );
        add_action( 'wp_print_footer_scripts', function () {
            // add different options to datepicker if you want https://api.jqueryui.com/datepicker/
            echo '<script type="text/javascript">jQuery(function($){$(".use-datepicker").datepicker()});</script>';
        } );
    }

}

add_action( 'wp_enqueue_scripts', 'dd_add_datepicker_to_cf7', 99 );

【讨论】：