I trying to use Javascript to inject the date value i.e 23 May 2025 into the website with Angular calendar picker but not working.
The date field is not editable meaning user has to click on the calendar picker to choose the date i.e 23 May 2025.
The below javascript was used but the date field is not populated.
;(function () {
const ContainerDataTable_JSON = '[["ABCD 4231466", "13 May 2025"], ["ABCD 6906828", "13 May 2025"], ["ABCD 0589449", "13 May 2025"], ["ABCD 1883165", "13 May 2025"]]';
let ContainerDataTable;
try {
ContainerDataTable = JSON.parse(ContainerDataTable_JSON);
} catch (e) {
console.error("❌ Failed to parse JSON:", e);
return;
}
if (!Array.isArray(ContainerDataTable)) {
console.error("❌ Parsed data is not an array:", ContainerDataTable);
return;
}
const containerMap = {};
ContainerDataTable.forEach(([container, date]) => {
containerMap[container.trim().toUpperCase()] = date.trim();
});
const rows = document.querySelectorAll("tr");
rows.forEach((row) => {
const containerCell = row.querySelector("td.cdk-column-containerNumberMasking");
if (containerCell) {
const containerNumber = containerCell.textContent.trim().toUpperCase();
if (containerMap.hasOwnProperty(containerNumber)) {
const input = row.querySelector("input.mat-datepicker-input");
if (input) {
input.removeAttribute("readonly");
input.removeAttribute("disabled");
const toggleButton = row.querySelector("button.mat-datepicker-toggle");
if (toggleButton) {
toggleButton.click();
console.log(`📅 Calendar opened via toggle for ${containerNumber}`);
} else {
input.click();
console.log(`📅 Calendar opened via input click for ${containerNumber}`);
}
const dateValue = containerMap[containerNumber];
const dateParts = dateValue.split(" ");
const day = parseInt(dateParts[0], 10);
const month = dateParts[1];
const year = dateParts[2];
const validMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
if (!validMonthNames.includes(month)) {
console.error(`❌ Invalid month in date: ${month}`);
return;
}
// ✅ Use standardized format: "DD MMM YYYY"
const formattedDateString = `${day.toString().padStart(2, '0')} ${month} ${year}`;
setTimeout(() => {
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, formattedDateString);
input.dispatchEvent(new Event("input", { bubbles: true }));
input.dispatchEvent(new Event("change", { bubbles: true }));
input.dispatchEvent(new Event("blur", { bubbles: true }));
input.dispatchEvent(new Event("focusout", { bubbles: true }));
console.log(`✅ Set ${containerNumber} date to ${formattedDateString}`);
}, 1000);
} else {
console.warn(`⚠️ Input not found for ${containerNumber}`);
}
}
}
});
