联系表格 7 Datepicker，2 个日期之间的日期范围答案

【问题标题】：Contact form 7 Datepicker, date range between 2 dates联系表格 7 Datepicker，2 个日期之间的日期范围
【发布时间】：2013-08-29 16:08:11
【问题描述】：

我想在我的 Wordpress 联系表 7 中有两个日期字段。一个开始日期和一个结束日期。这些字段将是来自“Contact Form 7 Datepicker”插件的日期选择器。当访问者选择了开始日期时，他应该只能选择比开始日期晚 4 天的结束日期。

如何仅使用“联系表格 7”表单创建器来实现此目的？

【问题讨论】：

标签： wordpress datepicker jquery-ui-datepicker contact-form-7

【解决方案1】：

这是我在“联系表格 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 天。

【讨论】：

【解决方案2】：

也许这个插件会对你有所帮助。此插件与 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 );
        }
    });
});

【讨论】：

我已经安装了插件。我想知道接下来我应该做什么。
我猜你正在使用contact-form-7 插件。我给你的链接是contact-form-7-DATEPICKER。
是的，我也安装了contact-form-7-DATEPICKER。
好的，现在您可以添加两个日期字段，即开始日期和结束日期，使用 jquery 您可以通过在 datepicker 示例中添加 onclose 事件来实现您想要实现的目标可以是这样的。我已经用示例编辑了我的答案。
感谢您的帮助。 - 当我将 id:from 和 id:to 添加到 datepicker 语法时，datepicker 不知何故不再工作。字段保持空白。相反，我给了他们一个 class:from 和 class:to。并将js中的#from更改为.from等。仍然没有运气。我是否应该在日期选择器中输入任何其他值：从 [date date-622 class:from date-format:mm/dd/yy] 到 [date date-460 class:to date-format:mm/dd/yy] ？

【解决方案3】：

2021 更新：由于安全原因，联系表 7 日期选择器已从 wordpress 存储库中删除 https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/

你可以试试 Fahad Mahmood 的 WP-Datepicker

【讨论】：

【解决方案4】：

这是我不使用插件的解决方案，这是 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
}

【讨论】：