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

None of the above worked for me, mainly because datepicker() is part of jQuery UI, and won't do anything without. So here's my solution, that worked:

Check-in date:
[date* date-start date-format:MM_dd_yy]

Check-out date:
[date* date-end date-format:MM_dd_yy]

Than the code i inserted in my 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);

This works in both directions, with start and end date.

Answer 2

There is no way to achieve it with the form builder directly, but with a bit of JavaScript you can validate the second input field to get your desired behaviour.

Here is an example, that falls back to the earliest date possible once a date is selected, that is out of scope.

<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>

On WordPress, you probably do not need to load jQuery extra and for the form markup you can add the classes in the CF7 builder like so:

[date date-427 class:c-date-start]
[date date-427 class:c-date-end]

Change the selectors and the minimum timespan according to your needs by adjusting the following declarations inside the source:

const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4

Answer 3

This is my solution without the use of plugins, this is the code of the CF7 fields:

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

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

this is the code added in the functions.php file:

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
}

Answer 4

2021 Update: Contact form 7 datepicker was removed from wordpress repository due to security reasons https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/

You can try the WP-Datepicker by Fahad Mahmood

Answer 5

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 6

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