如何设置HTML日期选择器的最大日期，仅允许输入当日之前的日期？

不同场景下的最简方案略有区别，直接给你分情况说明：

1. HTML原生日期控件（无需额外JS逻辑，最简） #

原生的<input type="date">支持通过max属性限制可选日期范围，只需要把max的值设为当日的YYYY-MM-DD格式字符串就行。因为日期格式要求固定，直接用JS动态生成当日日期：

<input type="date" id="pastDateInput">

<script>
// 获取当日日期并转为YYYY-MM-DD格式
const today = new Date().toISOString().split('T')[0];
document.getElementById('pastDateInput').max = today;
</script>

这样控件会自动禁用当日之后的日期，用户根本选不了，体验和实现成本都最低。

2. 普通文本输入框的JS校验（如果必须用文本框） #

要是没法用原生日期控件，就监听输入事件，校验输入日期是否晚于当日：

<input type="text" id="dateTextInput" placeholder="请输入YYYY-MM-DD格式日期">

<script>
const input = document.getElementById('dateTextInput');
const today = new Date();
// 把当日时间设为0点，避免时分秒影响比较
today.setHours(0, 0, 0, 0);

input.addEventListener('change', function() {
  const inputDate = new Date(this.value);
  inputDate.setHours(0, 0, 0, 0);
  
  if (inputDate > today) {
    alert('只能输入当日或之前的日期');
    this.value = ''; // 清空不符合要求的输入
  }
});
</script>

注意要统一日期的时分秒为0，不然会出现比如当日10点输入当日0点的日期被误判的情况。

3. Vue框架下的最简实现 #

在Vue里直接绑定max属性就行，模板里可以直接生成当日日期：

<template>
  <input type="date" :max="today">
</template>

<script setup>
const today = new Date().toISOString().split('T')[0];
</script>

同样利用原生控件的特性，无需额外校验逻辑，简单直接。

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