html `` 要显示默认值，其 `value` 属性必须严格采用 `yyyy-mm-dd` 格式的 iso 8601 字符串；若后端传入的日期格式不匹配（如 `yyyy/mm/dd`、`dd-mm-yyyy` 或带时间的 iso 字符串），则输入框将为空。
在 Web 表单开发中，为 设置初始值是一个常见但易出错的操作。与 text 或 select 元素不同，原生日期控件对 value 属性的格式有强制性要求：仅接受形如 2024-03-15 的字符串（即 YYYY-MM-DD），且该字符串必须是有效日期。任何偏差——包括多余空格、时区信息、斜杠分隔符或非标准顺序——都会导致浏览器忽略该值，渲染为空白控件。
例如，以下写法无法生效：
<!-- ❌ 错误：使用斜杠分隔 --> <input type="date" value="2024/03/15"> <!-- ❌ 错误：包含时间部分 --> <input type="date" value="2024-03-15T09:30:00Z"> <!-- ❌ 错误：日月年顺序（非 ISO） --> <input type="date" value="15-03-2024">
而正确写法如下（注意单引号/双引号内为纯 YYYY-MM-DD）：
<!-- ✅ 正确：标准 ISO 日期格式 --> <input type="date" name="start_date" id="start_date" value="2024-03-15">
在模板引擎（如 Jinja2、Django 模板、Twig 等）中，若后端传入的是 trip['start_date'] 这类变量，请务必确保它已格式化为 YYYY-MM-DD。常见修复方式包括：
立即学习“前端免费学习笔记（深入）”；
-
Python（Jinja2/Django）：
{# ✅ 推荐：在视图中预处理为字符串 #} <input type="date" name="start_date" value="{{ trip.start_date|date:'Y-m-d' }}"> {# 或在模板中安全转换（需确保 trip.start_date 是 date/datetime 对象） #} <input type="date" name="start_date" value="{{ trip.start_date.strftime('%Y-%m-%d') }}"> -
JavaScript（客户端动态设置）：
const dateInput = document.getElementById('start_date'); const isoDate = new Date(trip.startDate).toISOString().split('T')[0]; // 自动转为 YYYY-MM-DD dateInput.value = isoDate;
⚠️ 重要注意事项：
- 浏览器不会自动解析或转换日期格式，value 必须是“开箱即用”的合法字符串；
- 若后端返回 null、空字符串或无效日期，value 应留空（而非填入 'null' 字符串），否则可能触发验证错误；
- 建议在服务端统一做日期标准化处理，避免模板层逻辑冗余；
- 可配合 min / max 属性增强用户体验，例如 。
总之，解决 date 输入框默认值不显示的问题，核心在于格式守门：始终确保 value 属性的值是符合 HTML 规范的 YYYY-MM-DD 字符串。这是前端与后端协作中一个典型“小细节决定成败”的案例。
