pro/2024_WEBSITE_fipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fbatch dates new version only in front

Browse Source
This commit is contained in:
asus
2024-04-25 14:17:06 +02:00
parent 2205044f74
commit 101d27be55
3 changed files with 141 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
plugins/fbpatch/js/dates.js
View File

@@ -1,8 +1,10 @@
/*
* 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'
*
* 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
*
*/
@@ -11,14 +13,11 @@ 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
* first creates the fake 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);
}
create_fake_date_input(options, this);
/*
* then override the options to add action on select date :
@@ -28,13 +27,60 @@ jQuery.fn.datepicker = function(options) {
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);
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
*
*/
function create_fake_date_input(options, element) {
const fake_id = 'acf_date_fake_' + element.attr('id');
// false element already exists
if (jQuery('#' + fake_id).length !== 0) {
return;
}
const fake_name = 'acf_date_fake_for_' + element.attr('name');
const original_date_string = element.val();
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 = `
border: 1px solid blue;
position: absolute;
top: 0px;
left: 100px;
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);
}