Datepicker custom options based on field ID

How To
1

Hello,

Is it possible to customize datepicker options in form element based on form field ID?

I’m building a basic booking form, where I want to use two datepicker fields: one - to pick a date and the other one - to pick time.

For example, for my date field with ID ‘abcd’ I could use something like this:

add_filter('bricks/element/form/datepicker_options', function($options, $element) {
        // Set the minimum date to today for the date field with ID 'abcd'
        $options['minDate'] = 'today';
	
return $options;
}, 10, 2);

and for my time field with ID ‘efjk’:

add_filter('bricks/element/form/datepicker_options', function($options, $element) {
        // Disable calendar for the time field with ID 'efjk'
        $options['enableTime'] = true;
        $options['noCalendar'] = true;
        $options['dateFormat'] = 'H:i';
	
return $options;
}, 10, 2);

Also, when disabling calendar in flatpickr for time field the input data still has date in it.

I appreciate any help.

2

Hi,
I would also like to achieve this.
I have two date fields in one form and would like to have different options for each.

The only thing I could do was validate form ID, not the date fields

/**
 * Customize datepicker
 */
add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {

	if ( $element->id === 'lmcnyr' OR $element->id === '5385ff' ) { // Registration OR Edit

		// Source: https://flatpickr.js.org/examples/
		$options['firstDayOfWeek'] = 1; // Set Monday as the first week day
		//$options['maxDate'] = 'today'; // Disable all future dates
		
		$options['altInput'] = true;
		$options['allowInput'] = true;
		$options['altFormat'] = 'j F, Y';
		$options['dateFormat'] = 'Ymd'; // ACF Format

		// For Date Of Birth
		if ($element->id === 'bwopgy') { // does not work for date_of_birth field
			$options['maxDate'] = 'today'; // Disable all future dates
		}

		return $options;
		
	}
	return $options;
}, 10, 2 );