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 动态选择下拉字段