Contact form 7 Datepicker, date range between 2 dates

Question

I would like to have two date field in my Wordpress contact form 7. A start-date and an end-date. The fields will be datepickers from the "Contact Form 7 Datepicker" plugin. When visitor has selected a start-date he should only be able to select an end date that is 4 days later then the start-date.

How can I achieve this by only using the "contact form 7" form creator?

Answer 1

This is the syntax I put in the "contact form 7".

Start date charter*:
[date* date-start date-format:MM_d_yy]

End date charter*:
[date* date-end date-format:MM_d_yy]

And I added this code to the end of the functions file of the Wordpress theme.

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');

Now the second date picker must be at least 4 days later then the first date picker.

Answer 2

May be this plugin will help you. This plugin works along with CF 7

http://wordpress.org/plugins/contact-form-7-datepicker/

And you can add your own javascript for date manipulation after adding datepicker in CF 7.

Example:

jQuery(document).ready(function($) {
    $( ".from" ).datepicker({
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( ".to" ).datepicker({
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});