146 lines
3.6 KiB
JavaScript
146 lines
3.6 KiB
JavaScript
|
|
/*
|
|
* 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 false input that will mask the real one
|
|
* and put the original date format on the false element,
|
|
* while transforming the real one with the acf format 'Ymd'
|
|
*
|
|
* 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 creates the fake input
|
|
*
|
|
*/
|
|
create_fake_date_input(options, 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');
|
|
const formated_date = jQuery.datepicker.formatDate(acf_date_format, selected_date);
|
|
|
|
const fake_id = 'acf_date_fake_' + inst.id;
|
|
jQuery('#' + fake_id).val(date_text);
|
|
jQuery(this).val(formated_date);
|
|
}
|
|
|
|
// call the original datepicker function with the updated option
|
|
return original_datepicker.call(this, options);
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
* creates the false element
|
|
* place it above the real one to hide it
|
|
*
|
|
*/
|
|
async function create_fake_date_input(options, element) {
|
|
const fake_id = 'acf_date_fake_' + element.attr('id');
|
|
if (jQuery('#' + fake_id).length !== 0) {
|
|
return;
|
|
}
|
|
|
|
|
|
const fake_name = 'acf_date_fake_for_' + element.attr('name');
|
|
const original_date_string = await get_acf_date_from_rest(element);
|
|
const fake_value = original_date_string;
|
|
|
|
|
|
/*
|
|
* we position the hidden element right in top of the real datepicker one
|
|
* it might nor work in some situation, but so far it's good
|
|
* then we remove pointer events, so that clicking on it actually clicks on the real input
|
|
*
|
|
*/
|
|
let fake_style = `
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
pointer-events: none;
|
|
`;
|
|
const font_weight = element.css('font-weight');
|
|
if (font_weight) {
|
|
fake_style += `font-weight: ${font_weight};`;
|
|
}
|
|
|
|
|
|
/*
|
|
* gives the parent element a defined position if needed
|
|
* then create the false input above the real one
|
|
*
|
|
*/
|
|
if (element.parent().css('position') === 'static') {
|
|
element.parent().css('position', 'relative');
|
|
}
|
|
jQuery(`<input type="text" id="${fake_id}" name="${fake_name}" style="${fake_style}" value="${fake_value}">`).insertAfter(element);
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
* use the rest api to get the formated value for the date field
|
|
*
|
|
*/
|
|
async function get_acf_date_from_rest(element) {
|
|
const pid = getUrlParameter('pid');
|
|
|
|
const prefix = "de_fb_";
|
|
const name = element.attr('name')
|
|
let acf_name = name.substring(prefix.length);
|
|
|
|
let date = element.val(); // default date, not formated, if fetch call fails
|
|
let fetch_data = null;
|
|
|
|
try {
|
|
const response = await fetch(`/wp-json/wp/v2/posts/${pid}?_fields=acf.${acf_name}&acf_format=standard`);
|
|
fetch_data = await response.json();
|
|
tmp_date = fetch_data.acf[acf_name];
|
|
if (tmp_date) {
|
|
date = tmp_date;
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('Error fetching ACF field:', error);
|
|
}
|
|
|
|
return date;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
* https://stackoverflow.com/a/21903119/9497573
|
|
*
|
|
*/
|
|
function getUrlParameter(sParam) {
|
|
let sPageURL = window.location.search.substring(1),
|
|
sURLVariables = sPageURL.split('&'),
|
|
sParameterName,
|
|
i;
|
|
|
|
for (i = 0; i < sURLVariables.length; i++) {
|
|
sParameterName = sURLVariables[i].split('=');
|
|
|
|
if (sParameterName[0] === sParam) {
|
|
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|