设value为空仍显示空白，是因为浏览器只接受YYYY-MM-DD格式的有效日期；初始为空应省略value属性，而非设为""或无效值。
HTML value 还显示为空？
因为浏览器对 的初始值有严格格式要求：必须是 YYYY-MM-DD 格式，且必须是有效日期（比如不能是 2024-02-30）。如果 value 属性缺失、为空字符串、格式错误或无效，浏览器会直接忽略它，表现为“空白”——但这不是你“设为空”，而是“没设成”。
所以想让它初始为空，正确做法不是“设一个空值”，而是**不设 value 属性**。
- ✅ 正确：
（完全不写value） - ❌ 错误：
（显式设空字符串，部分浏览器会尝试解析并清空输入框，行为不一致） - ❌ 错误：
（无效日期，被忽略）
JavaScript 动态清空日期输入框后，怎么确保它真成为空？
用 input.value = "" 看似清空，但某些浏览器（如 Safari）可能仍显示占位提示或残留上一次值。真正可靠的清空方式是赋一个空字符串，并紧接着触发 input 和 change 事件，让绑定的框架（如 Vue/React）或校验逻辑感知变化。
const dateInput = document.querySelector('input[type="date"]');
dateInput.value = '';
dateInput.dispatchEvent(new Event('input', { bubbles: true }));
dateInput.dispatchEvent(new Event('change', { bubbles: true }));
- 只设
value = ""不够，事件未触发时，表单验证或双向绑定可能无响应 - 不要用
dateInput.value = null或undefined，它们会被转成字符串"null"或"undefined"，反而填入非法值 - 如果页面加载后 JS 才执行，记得等 DOM 就绪（比如放在
DOMContentLoaded里）
Vue / React 中怎么让日期输入框默认为空？
框架会接管 value 绑定，关键在于初始化数据为 null 或 undefined，而不是空字符串。
- Vue：
data() { return { selectedDate: null }; }，模板中用v-model="selectedDate"——null会被正确映射为空输入 - React（受控组件）：
const [date, setDate] = useState(null);，—— 注意这里value不能传null，要 fallback 成空字符串，否则控制台报错且输入框失效 - ⚠️ 别在 React 中写
value={date}（当date是null时），会导致输入框变成只读
为什么加 required 后，空日期输入框提交时报错但看起来没填？
这是预期行为。required 要求用户必须选择一个有效日期；而初始为空时，input.checkValidity() 返回 false，表单阻止提交。但视觉上它确实就是空的——这恰恰说明它没被意外赋值。
- 不要试图用 CSS 隐藏默认占位符（HTML date 输入框本身没有
::placeholder伪元素，无法自定义提示文字） - 如果业务允许“未选择”，就别加
required；如果必须选，那就接受这个“空即无效”的交互逻辑 - 服务端仍需校验，因为前端
required可被绕过
浏览器对 type="date" 的空值处理很“固执”：它不接受模糊状态，只认严格格式的有效日期或彻底无 value。任何想“模拟占位文字”或“半空半填”的取巧方式，基本都会在某个浏览器里翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
