HTML5如何设置date类型input默认显示当天日期

纯HTML5做不到动态填充当天日期的效果——HTML本身是静态标记语言，没有内置获取当前日期的动态能力，加几行JavaScript配合就能实现，完全满足你「页面加载后输入框默认展示当天日期」的需求。

你现在用的type="date"输入框本身是符合规范的，这类输入框的value只接受YYYY-MM-DD格式的日期字符串，只要把格式化后的当天日期赋值给它就能默认显示，不需要改动你原有输入框上的任何属性（class、name、id、校验相关的属性都可以保留）。

完整实现代码 #

<!-- 你原有的日期输入框，原有属性全部保留不用改 -->
<input type="date" name="from" value="" id="date" class="ajaxField required"/>

<script>
// 等页面DOM加载完成后再执行，避免找不到输入框元素
document.addEventListener('DOMContentLoaded', () => {
  const dateInput = document.getElementById('date');
  // 月、日数值小于10时前面补0，保证符合YYYY-MM-DD的格式要求
  const padZero = num => num < 10 ? `0${num}` : num;
  const now = new Date();
  // 拼接成标准格式：注意getMonth返回的是0-11，要加1才是实际月份
  const todayFormat = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())}`;
  // 赋值后输入框就会默认展示当天日期
  dateInput.value = todayFormat;
})
</script>

避坑提示 #

• 不要把固定日期硬写在input的value属性里，那样日期不会随时间自动更新，永远显示你写死的那天
• type="date"输入框的value值强制要求为YYYY-MM-DD横杠分隔格式：哪怕你本地浏览器会把日期显示成本地化样式（比如中文环境下显示「2024年x月x日」），格式不对的话赋值会直接失效，输入框显示空白
• 这段代码没有引入额外依赖，不会影响你原有绑定在输入框上的ajax提交、必填校验逻辑

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