Contact Form 7 上的日历字段:如何使它在该字段的任何位置都可点击?

Posted

技术标签:

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

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

【问题讨论】:

你是如何显示你的日历图标的?你在用插件吗? 【参考方案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 );

【讨论】:

以上是关于Contact Form 7 上的日历字段:如何使它在该字段的任何位置都可点击?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Contact Form 7 字段添加到我的自定义 HTML 代码?

Wordpress Contact Form 7 根据 url 动态选择下拉字段

使 Contact Form 7 触发引导模式

如何水平对齐 Contact Form 7 插件表单?

wordpress contact-form-7 表单 代码如何调用?

通过 Wordpress 上的 Contact Form 7 将表单连接到电子邮件