如何在HTML中实现日期选择器页面加载时自动选中当前日期

先梳理现有代码存在的3个核心问题：

• 两个日期输入框使用了重复的id start，不符合DOM规范，无法通过id准确定位第二个日期框
• jQuery日期选择器绑定的目标是#datePicker，但第二个日期输入框没有设置对应id，仅name为datePicker，选择器无法命中元素
• 页面加载的onLoad函数中没有添加给第二个日期框赋值的逻辑

具体修改步骤 #

1. 修正第二个日期输入框的id属性 #

修改HTML中第二个日期输入框的代码，和jQuery选择器目标匹配：

<!-- 修改前 -->
<input type="date" id="start" name="datePicker" min="2005-01-01" value="">
<!-- 修改后 -->
<input type="date" id="datePicker" name="datePicker" min="2005-01-01" value="">

2. 补充页面加载时的日期赋值逻辑 #

修改原有onLoad函数，添加当前日期赋值逻辑：

function onLoad() {
  var y = document.getElementById("myDIV");
  y.style.display = "none";
  // 新增：给第二个日期框赋值当前日期
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0');
  var yyyy = today.getFullYear();
  var formattedToday = yyyy + '-' + mm + '-' + dd;
  document.getElementById("datePicker").value = formattedToday;
}

3. 可选冗余校验 #

如果确认使用jQuery datepicker组件，需确保页面已经引入jQuery和bootstrap-datepicker的依赖，原有datepicker初始化逻辑可以保留，和上面的原生赋值逻辑不冲突。

其他注意事项 #

• 原生type="date"输入框的value必须是YYYY-MM-DD格式，不要传入其他格式的日期字符串，否则会赋值失败
• 同一个页面内所有元素的id必须唯一，否则会导致DOM选择、表单提交等异常
• 现有代码中document.getElementById("datefield").setAttribute("max", today);这行找不到对应id的元素，运行会报错，可以直接删除

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