/*
* overriding the datepicker function to intercept the arguments
* -> https://stackoverflow.com/questions/26667720/how-to-get-the-selected-date-from-jquery-datepicker
* then create an hidden input with the date in acf format 'yymmdd'
*
* another solution would be to find the elements with the datepicker, and add the onSelect here
*
*/
// store the original jQuery UI datepicker function
const original_datepicker = jQuery.fn.datepicker;
// override the datepicker function
jQuery.fn.datepicker = function(options) {
	/*
	* first get the target element and create the hidden input
	*
	*/
	const hidden_id = 'acf_date_hidden_' + this.attr('id');
	const hidden_name = 'acf_date_hidden_for_' + this.attr('name');
	if (jQuery('#' + hidden_id).length === 0) {
		jQuery(`<input type="hidden" id="${hidden_id}" name="${hidden_name}">`).insertAfter(this);
	}

	/*
	* then override the options to add action on select date :
	* -> store the date in acf format in the hidden field value
	*
	*/
	options.onSelect = function(date_text, inst) {
		const acf_date_format = "yymmdd";
		const selected_date = jQuery(this).datepicker('getDate');
		console.log("-- selected_date:", selected_date);
		const formated_date = jQuery.datepicker.formatDate(acf_date_format, selected_date);

		const hidden_id = 'acf_date_hidden_' + inst.id;
		jQuery('#' + hidden_id).val(formated_date);
	}

	// call the original datepicker function with the updated option
	return original_datepicker.call(this, options);
};