我希望在我的 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 中添加日期选择器后,您可以添加自己的 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
}
无法直接使用表单生成器来实现它,但使用一些 JavaScript,您可以验证第二个输入字段以获得所需的行为。
这是一个示例,一旦选择日期,就会回退到可能的最早日期,这超出了范围。
<input type=date class=c-date-start>
<input type=date class=c-date-end>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Add the below code to the page your form is located -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
jQuery(($) => {
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
// Only allow dates in date end field that are after the date start field plus the minimum buffer
dateEnd.on('change', () => {
const startDate = dateStart.val()
const endDate = dateEnd.val()
if (startDate && endDate) {
const startDateMoment = moment(startDate)
const endDateMoment = moment(endDate)
const minDate = startDateMoment.clone().add(minBuffer, 'days')
if (endDateMoment.isBefore(minDate)) {
dateEnd.val(minDate.format('YYYY-MM-DD'))
}
}
})
})
</script>
在 WordPress 上,您可能不需要额外加载 jQuery,对于表单标记,您可以在 CF7 构建器中添加类,如下所示:
[date date-427 class:c-date-start]
[date date-427 class:c-date-end]
通过调整源中的以下声明,根据您的需要更改选择器和最小时间跨度:
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
以上对我来说都不起作用,主要是因为 datepicker() 是 jQuery UI 的一部分,没有它就不会做任何事情。这是我的解决方案,有效:
Check-in date:
[date* date-start date-format:MM_dd_yy]
Check-out date:
[date* date-end date-format:MM_dd_yy]
比我在 custom.js 中插入的代码:
(function($) {
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.on('change', function() {
var start_date = new Date(start.val());
day = start_date.getDate() + 1;
month = ('0' + (start_date.getMonth() + 1)).slice(-2);
year = start_date.getFullYear();
start_date = [year, month, day].join('-');
end.prop('min', start_date);
});
end.on('change', function() {
var end_date = new Date(end.val());
day = end_date.getDate() - 1;
month = ('0' + (end_date.getMonth() + 1)).slice(-2);
year = end_date.getFullYear();
end_date = [year, month, day].join('-');
start.prop('max', end_date);
});
})(jQuery);
这适用于两个方向,包括开始日期和结束日期。