Set Default Booking Date

[emilio.micali]

Hi,
i created this snippet that sets a default date in booking make form on listing view page.

add_filter(
	'hivepress/v1/forms/booking_make',
	function( $form ) {

		return hivepress()->helper->merge_trees(
			$form,
			[
				'fields' => [
					'_dates' => [
                        'value' => '2023-11-21',
					],
				],
			]
		);
	},
	1000
);

The text in the calendar input is correctly set but the values of the available times are not updated an i still get “No results found”.

How can I trigger a ajax call so it will load the time for the programmaticly selected date?

Thank you so much in advance.

[yevhen]

Thank you for waiting. Unfortunately, there’s no simple code snippet for this. It would require a custom implementation. It is necessary to add a date to the date field with the JS code snippet too.

It is possible to get the date field in the booking make form this way.

$(document).find('.hp-form--booking-make ' + hivepress.getSelector('date')).each(function () {
    var field = $(this);

    if (field.get(0).hasOwnProperty('_flatpickr')) {
		var dateFlatpickr = field.get(0)._flatpickr;
	}
});

Then it is possible to add a date with the setDate method The flatpickr Instance - flatpickr

If customizations beyond the available features are required for your site, please consider hiring someone for custom work Fiverr - Freelance Services Marketplace

[emilio.micali]

Hi yevhen,
thank you so so much you helped me a lot!

I created the full script, I share it here if someone else will need it.

// SET BOOKING SEARCHED DATE
add_filter(
	'hivepress/v1/forms/booking_make',
	function( $form ) {

		setCustomDate();
		return $form;
	},
	1000
);

function setCustomDate(){
	echo ('	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>');
	?><script>

	$(document).ready(function() {
		$(document).find('.hp-form--booking-make ' + hivepress.getSelector('date')).each(function () {
			var field = $(this);

			setTimeout(function() {
				if (field.get(0).hasOwnProperty('_flatpickr')) {
					var dateFlatpickr = field.get(0)._flatpickr;

					// Create a Date object using the provided date string
					var setDate = new Date("2023-11-29");

					// Set the date using the created Date object
					dateFlatpickr.setDate(setDate, true);
				}
			}, 100); // You might need to adjust the delay based on your application
		});
	});
	</script><?php
}

Thank you again!
Emilio