start date and end date field

I have same problem.

I have 2 date field.

Check-in date and Check-Out date.

Checkout date must be greater than Check-In date.

How Do I put this using this plugin: https://www.ads-software.com/plugins/contact-form-7-datepicker/screenshots/

Please tell me a Good Solution.

I have the same question.

Is this contact form capable of adding this type of logic?
It would be most helpful for sites using multiple days reservation.

I would also like to add… for example, if check-in date is March 04, 2015, can the datepicker for check-out automatically begin on the next day (March 05, 2015)?

Thanks for investigating and making this form even more powerful.

I have a working solution for this issue.

I have two datepickers in my form, I called them startDateTime and stopDateTime. The datepicker code creates two calendars contained in different divs with the ids of startDateTime_datepicker and stopDateTime_datepicker.

Your code will have different names so will have to change these to match what is on your site.

So the rules for my calendar is that the exit date must be at least one day in the future of the entrance date (your rules maybe different) so that is what this code handles.

In the footer section of my site ( just before the final </body></html> tags ) I have placed the following code:

<script>
jQuery(document).ready(function( $ ) {
$('#startDateTime_datepicker').change(function(){
	var new_start = $(this).find(".ui-state-hover");
	var new_start_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(new_start.parent().attr('data-month'))+1) + "/" + new_start.html() + "/" + new_start.parent().attr('data-year'));
	var cur_end = $('#stopDateTime_datepicker').find(".ui-datepicker-current-day");
	var cur_end_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(cur_end.attr('data-month'))+1) + "/" + cur_end.find("a").html() + "/" + cur_end.attr('data-year'));
	if ( cur_end_date <= new_start_date ) {
		var new_end_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(new_start.parent().attr('data-month'))+1) + "/" + (parseInt(new_start.html())+1) + "/" + new_start.parent().attr('data-year'));
		$('#stopDateTime_datepicker').datepicker(
			"setDate", new_end_date,
			"defaultDate", new_end_date
		);
	}
});

$('#stopDateTime_datepicker').change(function(){
	var new_end = $(this).find(".ui-state-hover");
	var new_end_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(new_end.parent().attr('data-month'))+1) + "/" + new_end.html() + "/" + new_end.parent().attr('data-year'));
	var cur_start = $('#startDateTime_datepicker').find(".ui-datepicker-current-day");
	var cur_start_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(cur_start.attr('data-month'))+1) + "/" + cur_start.find("a").html() + "/" + cur_start.attr('data-year'));
	if ( new_end_date <= cur_start_date ) {
		var new_start_date = $.datepicker.parseDate("mm/dd/yy",(parseInt(new_end.parent().attr('data-month'))+1) + "/" + (parseInt(new_end.html())-1) + "/" + new_end.parent().attr('data-year'));
		$('#startDateTime_datepicker').datepicker(
			"setDate", new_start_date,
			"defaultDate", new_start_date
		);
	}
});
});
</script>

I hope this works for you as well as it did for me.

Good luck and happy coding.

Hello jwrightspplus.

This code working yet? I have 2 field:
Start:
[date* data-poczatku-wynajmu id:kalendarzpoczatek class:poledaty date-format:mm/dd/yy min-date:today max-date:+1y first-day:1 buttons placeholder "Data odbioru"]
End:
[date* data-konca-wynajmu id:kalendarzkoniec class:poledaty date-format:mm/dd/yy min-date:today max-date:+1y first-day:1 buttons placeholder "Data zwrotu"]
But I can’t implement your code ??