使用JavaScript修改网页日期值后页面未触发更新如何解决

问题原因 #

直接通过value属性修改输入框值仅会更新DOM属性，不会触发网页绑定在日期组件上的事件监听逻辑，网页无法感知值发生变化，因此不会执行后续更新操作。你使用的日期组件属于JSF框架生成的组件，默认会监听输入、值变更、失焦等事件触发联动。

解决方案 #

将你当前使用的单句赋值代码替换为以下完整代码即可：

// 获取目标日期输入框元素
const dateInput = document.getElementById("accPanelFilter:formFilter:panelSearch:j_idt80:j_idt82:daySelectGasDay:daySelectGasDaycalendar:daySelectGasDaycalendarcalendar_input");
// 修改日期值
dateInput.value = "10-11-2021";
// 触发输入事件，模拟用户手动输入过程
dateInput.dispatchEvent(new Event('input', { bubbles: true }));
// 触发值变更事件，通知网页值已修改完成
dateInput.dispatchEvent(new Event('change', { bubbles: true }));
// 若以上操作仍未生效，可取消下方注释触发失焦事件
// dateInput.dispatchEvent(new Event('blur', { bubbles: true }));

手动操作参考截图 #

内容的提问来源于stack exchange，提问作者Sadam Shaikh