我想在我的 Wordpress 联系表 7 中有两个日期字段。一个开始日期和一个结束日期。这些字段将是来自“Contact Form 7 Datepicker”插件的日期选择器。当访问者选择了开始日期时,他应该只能选择比开始日期晚 4 天的结束日期。
我怎样才能通过仅使用“联系表 7”表单创建器来实现这一点?
我想在我的 Wordpress 联系表 7 中有两个日期字段。一个开始日期和一个结束日期。这些字段将是来自“Contact Form 7 Datepicker”插件的日期选择器。当访问者选择了开始日期时,他应该只能选择比开始日期晚 4 天的结束日期。
我怎样才能通过仅使用“联系表 7”表单创建器来实现这一点?
这是我在“联系表格 7”中输入的语法。
Start date charter*:
[date* date-start date-format:MM_d_yy]
End date charter*:
[date* date-end date-format:MM_d_yy]
我将此代码添加到 Wordpress 主题的函数文件的末尾。
function calendar_js(){
?>
<script>
jQuery(function($){
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.on('change', function() {
var start_date = $(this).datepicker('getDate');
start_date.setDate(start_date.getDate() + 3);
end.datepicker('option', 'minDate', start_date);
});
});
</script>
<?php
}
add_action('wp_footer', 'calendar_js');
现在第二个日期选择器必须比第一个日期选择器晚至少 4 天。
可能这个插件会帮助你。该插件与 CF 7 一起使用
http://wordpress.org/plugins/contact-form-7-datepicker/
在 CF 7 中添加 datepicker 后,您可以添加自己的 javascript 进行日期操作。
例子:
jQuery(document).ready(function($) {
$( ".from" ).datepicker({
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
2021 年更新:由于安全原因,联系表 7 日期选择器已从 wordpress 存储库中删除 https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/
你可以试试 Fahad Mahmood 的 WP-Datepicker
这是我不使用插件的解决方案,这是 CF7 字段的代码:
Start date charter *:
[date* date-start]
End date charter *:
[date* date-end]
这是在 functions.php 文件中添加的代码:
add_action('wp_footer', 'calendar_js');
function calendar_js()
{
?>
<script>
jQuery(function($)
{
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','maxDate',end.datepicker('getDate')); } });
end.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','minDate',start.datepicker('getDate')); } });
});
</script>
<?php
}