Wordpress 联系表格7日期选择器,日期范围在2个日期之间
我想在我的Wordpress联系人表格7中有两个日期字段。开始日期和结束日期。这些字段将是联系人表单7日期选择器插件中的日期选择器。 当访问者选择开始日期时,他只能选择比开始日期晚4天的结束日期Wordpress 联系表格7日期选择器,日期范围在2个日期之间,wordpress,datepicker,jquery-ui-datepicker,contact-form-7,Wordpress,Datepicker,Jquery Ui Datepicker,Contact Form 7,我想在我的Wordpress联系人表格7中有两个日期字段。开始日期和结束日期。这些字段将是联系人表单7日期选择器插件中的日期选择器。 当访问者选择开始日期时,他只能选择比开始日期晚4天的结束日期 仅使用联系人表单7表单创建者如何实现此目的?此插件可能会对您有所帮助。这个插件与CF7一起工作 在CF 7中添加datepicker之后,您可以添加自己的javascript进行日期操作 例如: jQuery(document).ready(function($) { $( ".from" ).
仅使用联系人表单7表单创建者如何实现此目的?此插件可能会对您有所帮助。这个插件与CF7一起工作 在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 );
}
});
});
可能这个插件会帮助你。这个插件与CF7一起工作 在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 );
}
});
});
这是我在联系人表单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天。这是我在联系人表单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天。我已经安装了插件。我想知道下一步该怎么做。我猜你正在使用contact-form-7插件。我给你的链接是针对contact-form-7-DATEPICKER的。是的,我也安装了contact-form-7-DATEPICKER。好的,现在你可以添加两个日期字段,即开始日期和结束日期,使用jquery,你可以通过向DATEPICKER添加onclose事件来实现你想要实现的目标。示例如下所示。我已经用例子编辑了我的答案。谢谢你的帮助当我将id:from和id:to添加到datepicker语法中时,不知何故,datepicker不再工作。字段保持空白。相反,我给他们上了一节课:from和class:to。并将js中的from改为.from等。还是不走运。我是否应该在datepicker中输入任何其他值,从[date-date-622 class:from date format:mm/dd/yy]到[date-date-460 class:to date format:mm/dd/yy]?我已经安装了插件。我想知道下一步该怎么做。我猜你正在使用contact-form-7插件。我给你的链接是针对contact-form-7-DATEPICKER的。是的,我也安装了contact-form-7-DATEPICKER。好的,现在你可以添加两个日期字段,即开始日期和结束日期,使用jquery,你可以通过向DATEPICKER添加onclose事件来实现你想要实现的目标。示例如下所示。我已经用例子编辑了我的答案。谢谢你的帮助当我将id:from和id:to添加到datepicker语法中时,不知何故,datepicker不再工作。字段保持空白。相反,我给他们上了一节课:from和class:to。并将js中的from改为.from等。还是不走运。我是否应该在日期选择器中输入任何其他值,而不是:从[date-date-622类:从日期格式:mm/dd/yy]到[date-date-460类:到日期格式:mm/dd/yy]?