Bootstrap 5日期选择器设置默认当前日期并禁用过去日期

要实现你的需求，只需两步：生成标准格式的当前日期字符串，给日期输入框设置min属性（禁用过去日期）和value属性（默认选中当前日期）。

核心逻辑说明 #

• 日期输入框（type="date"）仅支持YYYY-MM-DD格式，需手动构造该格式的当前日期，避免时区偏差问题。
• 设置min属性为当前日期后，浏览器会自动禁用所有早于今日的日期选项。
• 设置value属性为当前日期，页面加载时默认选中今日。

修改后的完整代码 #

HTML部分

<div class="form-group">
  <label for="startDate">Start</label>
  <input id="startDate" class="form-control" type="date" />
</div>
<div class="form-group">
  <label for="endDate">End</label>
  <input id="endDate" class="form-control" type="date" />
</div>
<p>Selected Start Date: <span id="startDateSelected"></span></p>
<p>Selected End Date: <span id="endDateSelected"></span></p>

脚本部分

// 生成YYYY-MM-DD格式的当前日期字符串
function getCurrentDateString() {
  const now = new Date();
  const year = now.getFullYear();
  // 月份从0开始，需+1后补零为两位
  const month = String(now.getMonth() + 1).padStart(2, '0');
  // 日期补零为两位
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const startDate = document.getElementById('startDate');
const endDate = document.getElementById('endDate');
const currentDate = getCurrentDateString();

// 给startDate设置默认值和禁用过去日期
startDate.value = currentDate;
startDate.min = currentDate;

// 监听startDate变化，同步更新显示和endDate的可选范围
startDate.addEventListener('change', (e) => {
  const startDateVal = e.target.value;
  document.getElementById('startDateSelected').innerText = startDateVal;
  // 让endDate的最小值等于选中的startDate
  endDate.min = startDateVal;
  // 若endDate当前值小于startDate，自动重置为startDate
  if (endDate.value < startDateVal) {
    endDate.value = startDateVal;
  }
});

endDate.addEventListener('change', (e) => {
  const endDateVal = e.target.value;
  document.getElementById('endDateSelected').innerText = endDateVal;
});

关键细节解释 #

• padStart(2, '0')：确保月份和日期始终为两位数字（如1月转为01，5日转为05），符合日期输入框的格式要求。
• 手动构造日期字符串：避免toISOString()方法因时区差异导致的日期偏差（部分时区午夜前调用会得到前一天的日期）。
• 联动逻辑：若需要endDate不能早于startDate，添加对应的min属性设置和值重置逻辑，优化用户体验。

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