应通过动态渲染控制日期输入权限而非disabled属性：权限关闭时用样式一致的span替代input并保持格式统一，权限开启时才插入input；所有权限校验必须由后端兜底。
date input 的 value 无法通过 disabled 控制可编辑性
很多人以为给 <input type="date"> 加上 disabled 就能“隐藏权限”，其实不是：disabled 后用户不能改，但值仍可见、可提交，且样式灰化明显，一眼暴露权限逻辑。真要“动态展示”，核心是控制元素是否渲染，而不是开关属性。
用 JavaScript 动态插入或移除 date input 元素
权限变化时，直接操作 DOM 比 toggle 属性更干净。比如后端返回 canEditDate: false，就只渲染只读文本；为 true 才插入 input。
常见错误是用 display: none 或 visibility: hidden —— 这些只是视觉隐藏，表单仍会提交空值或旧值，且无障碍体验差（屏幕阅读器可能仍读出该控件）。
- 推荐用
document.createElement("input")+parent.replaceChild()或parent.appendChild()动态管理 - 若用框架（如 React/Vue），直接在 JSX/模板里用条件渲染：
{canEditDate ? <input type="date" name="due"> : <span>{formattedDate}</span>} - 服务端渲染场景下，务必在 HTML 输出阶段就决定是否生成
<input>标签，避免前端 JS 被绕过
只读状态下用 span 替代 input 并保持样式一致
单纯删掉 input 会导致布局跳动。用 <span></span> 显示日期时，需复刻原 input 的字体、行高、内边距和边框（哪怕只是 1px 浅灰实线），否则 UI 会“抖”。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 日期格式必须和服务端或业务逻辑对齐（例如 ISO 格式
"2024-06-15"需转成"2024年6月15日"再显示） - 不要依赖
input.valueAsDate在只读时取值——它只对<input type="date">有效；改用统一的数据源（如 state 或 data attribute） - 如果需要支持键盘焦点（如表格中导航），给
<span></span>加tabindex="0"和role="text"
权限校验必须后端兜底，前端只是体验优化
所有“动态展示”都运行在用户可控环境里。哪怕 input 被完全移除，攻击者仍可通过 DevTools 插入新 input、发请求篡改日期字段。所以：
- 后端接口必须校验当前用户是否有权修改该日期字段，不能只看请求里有没有传
due_date - 数据库写入前，应比对旧值与新值，再检查权限变更日志或角色策略
- 敏感操作（如回溯修改审批截止日）建议加二次确认或审计留痕，不单靠界面隐藏
最常被忽略的点：日期输入框常和时间字段耦合，而 type="datetime-local" 的权限逻辑要单独处理，它的值格式、时区行为、移动端兼容性都和 type="date" 不同——别直接复用同一套判断。
