【日期选择】输入框禁止编辑，直接输入日期格式被系统拦截

一、问题场景

“京东”订单后台系统，日期输入框设置readonly只读属性，不允许键盘输入，只能点开日历选择。

二、遇到的问题

1. 直接给输入框设置值【设置元素文本】，页面看着改好了，但提交表单后台不认，页面会重置回原来日期；

2. 日历控件月份切换逻辑复杂，点选日历步骤繁琐，动态计算的日期很难通过点击实现。

三、解决方案

利用 JS 绕过 readonly 限制，直接修改输入框 value，同时触发页面 change 变更事件。

1. 获取日期输入框元素；

2. 执行 JS 脚本：

3. input 参数传入预先用影刀日期函数格式化好的日期，格式严格对齐系统要求yyyy-MM-dd hh:mm:ss。

function(element,input){
    // input变量传入格式化好日期字符串，例如"2026-08-01 00:00:00"
    element.value = input;
    // 手动触发前端change事件，让框架识别日期修改
    element.dispatchEvent(new Event('change'));
    element.dispatchEvent(new Event('input'));
}

四、最终效果

不用点开日历弹窗，直接完成日期赋值，表单提交后台识别日期，不会重置。

五、踩坑提醒

⚠️重点：只修改 value 不派发change/input事件，前端框架不会感知数据变更，提交直接失效； 务必确认系统日期格式，有的页面要求yyyy-MM-dd hh:mm:ss，格式错依旧提交失败。