Exclude past dates and 3 next days in Date field in Form Builder

Ask the Community Customization
1

Hello Team,

I would be nice to block some dates on the date picker. You can now select dates in the past which should be blocked by default. My main problem is that I also could configure to block dates in the future Like Today+3. Visitors on my website can not book within a timeframe of 72 hours from today. Could you please add that feature?

3

Hey there, @PVS and welcome to the Community :waving_hand:

I am glad to say that our devs came up with a custom script for your case:

const CONFIG = {
	DISABLE_PAST_DATES: true,
	DISABLE_TODAY: true,
	DISABLE_FUTURE_DAYS: 2,

	// YYYY-MM-DD
	DISABLED_DATES: [],

	DISABLED_OPACITY: 0.5,

	WIDGET_SELECTOR: '.es-widget-background-container',
	CALENDAR_SELECTOR: '.react-calendar',
	TILE_SELECTOR: '.react-calendar__tile',
};


function normalizeDate(date) {
	const normalized = new Date(date);

	normalized.setHours(0, 0, 0, 0);

	return normalized;
}


function isSameDate(firstDate, secondDate) {
	return firstDate.getTime() === secondDate.getTime();
}


function isSpecificDateDisabled(date) {
	return CONFIG.DISABLED_DATES.some((disabledDate) => {
		return isSameDate(
			normalizeDate(date),
			normalizeDate(disabledDate)
		);
	});
}


function isDateDisabled(date) {
	const today = normalizeDate(new Date());
	const targetDate = normalizeDate(date);


	if (isSpecificDateDisabled(targetDate)) {
		return true;
	}


	if (
		CONFIG.DISABLE_PAST_DATES &&
		targetDate < today
	) {
		return true;
	}


	if (
		CONFIG.DISABLE_TODAY &&
		isSameDate(targetDate, today)
	) {
		return true;
	}


	if (CONFIG.DISABLE_FUTURE_DAYS > 0) {
		const firstFutureDisabledDate = new Date(today);

		firstFutureDisabledDate.setDate(
			firstFutureDisabledDate.getDate() + 1
		);


		const lastFutureDisabledDate = new Date(today);

		lastFutureDisabledDate.setDate(
			lastFutureDisabledDate.getDate() + CONFIG.DISABLE_FUTURE_DAYS
		);


		if (
			targetDate >= firstFutureDisabledDate &&
			targetDate <= lastFutureDisabledDate
		) {
			return true;
		}
	}


	return false;
}


function disableDates(calendar) {
	calendar
		.querySelectorAll(CONFIG.TILE_SELECTOR)
		.forEach((button) => {
			const label = button.querySelector('abbr')?.ariaLabel;

			if (!label) return;


			const date = new Date(label);


			if (isDateDisabled(date)) {
				button.disabled = true;
				button.style.pointerEvents = 'none';
				button.style.opacity = CONFIG.DISABLED_OPACITY;
			}
		});
}


util.waitForElement(CONFIG.WIDGET_SELECTOR).then((widget) => {
	const root = widget.getRootNode();

	let calendarObserverInitialized = false;


	async function initCalendar() {
		const calendar = await util.waitForElement(
			CONFIG.CALENDAR_SELECTOR
		);

		if (!calendar) return;


		disableDates(calendar);


		if (calendarObserverInitialized) return;

		calendarObserverInitialized = true;


		new MutationObserver(() => {
			disableDates(calendar);
		}).observe(calendar, {
			childList: true,
			subtree: true,
		});
	}


	new MutationObserver(() => {
		initCalendar();
	}).observe(root, {
		childList: true,
		subtree: true,
		attributes: true,
	});


	initCalendar();
});

DISABLE_PAST_DATES: true, - disables selection of past dates

DISABLE_TODAY: true, - disables the current day

DISABLE_FUTURE_DAYS: 2, - disable 2 next days after the current date

This block below lets you exclude specific dates from selection:

// YYYY-MM-DD
	DISABLED_DATES: [],

Currently it’s empty, but you can add specific dates in brackets. Here is how it should look:

DISABLED_DATES: [ '2026-08-10', '2026-08-15', '2026-09-01', ],

Please add the script to the Custom JS field on the Settings tab of your widget’s settings and let me know if it worked.

Note: Custom JS scripts don’t operate in the widget editor, so you’ll see the result on the page where the widget is installed :slightly_smiling_face:

4

Thank you so much this helped a lot!

5

Awesome, you’re always welcome :wink: