Question

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

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

Answer 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天。

Answer 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 );
        }
    });
});

Answer 3

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

你可以试试 Fahad Mahmood 的 WP-Datepicker

联系表格7 Datepicker，日期范围在2个日期之间

3 个答案: