Creating a Booking Form with Check-in and Check-out dates with Gravity Forms

Get Help
, , ,
1

I’m working on a way to create a booking calendar for a campsite with Gravity Forms which has all of the functionality I need apart from one small issue with the check-in/check-out dates.

I currently have two date picker fields set up, one for check-in and one for Check-out, and I have a calculation field that is able to work out the range of the dates and work out a price/night. All good so far.

The difficulty comes when trying to limit dates on the check-in and check-out dates.

I need to be able to restrict dates in a particular way. Bookings can only be made on weekends and some bank holidays (causing a bit of a problem - as you can’t simply restrict particular days of the week using the ‘gform_datepicker_options_pre_init’ function).

This is as far as I can get with this function, I’m able to restrict the dates to weekends only, but I’m unable to unset certain dates, and also limit the maximum date of the check-out field.

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 1 && fieldId == 1 ) {
        optionsObj.firstDay = 1;
        optionsObj.beforeShowDay = function(date) {
            var day = date.getDay();
            return [(day == 0 || day == 6)];
        };
    }
    return optionsObj;
});

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
    if ( formId == 1 && fieldId == 1 ) {
        optionsObj.minDate = 0;
        optionsObj.onClose = function (dateText, inst) {
             jQuery('#input_1_2').datepicker('option', 'minDate', dateText).datepicker('setDate', dateText);
        };
    }
    return optionsObj;
});

In addition to this, the checkout field needs to be on the same weekend as the check-in date that was specified. So for example you can’t have a check-in date of Saturday 13th March and a checkout date of Saturday 20th March.

I have looked around and whilst the documentation here (gform_datepicker_options_pre_init - Gravity Forms Documentation) does go some way in restricting dates, it doesn’t do everything I want it to do. Particularly being able to restrict certain days of the week and then enable particular days, and then limit the check-out date based on the check-in date.

I’ve also found a plugin here (Restrict Dates In Gravity Forms - Gravitymore.com), but my main concern is making sure the check-out date is dependent on the check-in date. It’s a bit of a worry that I seem to be trying to shoehorn in a key function of a booking form!

Many thanks for any help to help get this figured out!

2

Not a direct answer or suggestion for you, but perhaps if you can’t find a working solution specific to the date picker, what about some approaches that help site/user in different means?

  • Validating the field inputs on server side via gform_field_validation to ensure what people might submit by date-picker and non-date-picker means is valid.
  • Enqueue JS and modify the field description of what the user selects in opposite field to display what valid options would be?
3

Hi Jamie, thanks for your reply.

That actually could really help me work this out. I’ve found a piece of code from the documentation that would mean that can check the date of a field is less than 4 days away from today’s date;

add_filter('gform_field_validation_1_32', function ($result, $value, $form, $field) {
	if ( $result['is_valid'] ) {
		if (is_array($value) ) {
			$value = array_values($value);
		}
		$date_value = GFFormsModel::prepare_date ($field->dateFormat, $value);
		$checkin = new DateTime();
		$diff = $checkin->diff( new DateTime($date_value) );
		$checkout = $diff->d;
		if ( $checkout > 4 ) {
			$result['is_valid']= false;
			$result['message'] = 'Your dates are not on the same weekend';
		}
	}
	return $result;
}, 10, 4);

The $checkin value is currently being defined as today’s date, but in order to work this out correctly, it needs to be the value from the checkin date field. You don’t happen to know if there’s a way of doing this?

Many thanks for your help!

4

I know there is, but not the specifics for your case. Perhaps use of gform_validation and/or checking the $_POST object to work with the different field values. Probably a good one to submit a support ticket to Gravity Forms and attach a simplified form example export.

Good luck.
Jamie

5

Hi Kieran, my understanding of your requirements is that you need to:

  1. Limit selections to weekend days.
  2. Prevent some specific dates from being selected.
  3. Make sure the checkout date is always after the checkin date?

If so, Gravity Forms Limit Dates has you fully covered. Here’s a video demonstrating how to set this up. :slightly_smiling_face:

2 Likes