如何用HTML、原生JS限制date输入框：禁选未来及90天前日期

你的PHP代码失效大概率是环境问题——如果是纯前端页面，服务器不会解析<?= ... ?>这类PHP代码，min属性会被设成纯字符串，自然起不到限制作用。下面用纯HTML+原生JS实现你要的功能：

核心思路 #

1. 用JS计算当前日期作为可选范围上限（max），90天前的日期作为下限（min）
2. 页面加载时就给日期输入框设置这两个属性，确保每次打开页面都是最新的有效范围
3. 额外监听输入事件，防止用户手动输入不符合规则的日期

完整代码示例 #

HTML #

<div id="dateSelector">
    <input type="date" id="datePicker">
    <span id="dateError" style="color: red; display: none; margin-left: 8px;">日期不在可选范围内</span>
</div>

原生JavaScript #

// 把Date对象转成date输入框要求的YYYY-MM-DD格式
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 设置日期选择的有效范围
function setDateRange() {
    const datePicker = document.getElementById('datePicker');
    const today = new Date();
    const ninetyDaysAgo = new Date(today);
    ninetyDaysAgo.setDate(today.getDate() - 90);

    // 给输入框设置min和max属性
    datePicker.min = formatDate(ninetyDaysAgo);
    datePicker.max = formatDate(today);
}

// 验证用户输入的日期是否符合规则
function validateDateInput() {
    const datePicker = document.getElementById('datePicker');
    const errorMsg = document.getElementById('dateError');
    const selectedDate = new Date(datePicker.value);
    const today = new Date();
    const ninetyDaysAgo = new Date(today);
    ninetyDaysAgo.setDate(today.getDate() - 90);

    // 重置时间部分，避免时分秒干扰日期比较
    today.setHours(0, 0, 0, 0);
    selectedDate.setHours(0, 0, 0, 0);
    ninetyDaysAgo.setHours(0, 0, 0, 0);

    if (selectedDate < ninetyDaysAgo || selectedDate > today) {
        errorMsg.style.display = 'inline';
        // 可选操作：清空不符合规则的输入
        // datePicker.value = '';
    } else {
        errorMsg.style.display = 'none';
    }
}

// 页面加载完成后初始化日期范围
window.addEventListener('load', setDateRange);
// 监听输入变化，实时验证日期合法性
document.getElementById('datePicker').addEventListener('input', validateDateInput);

可选CSS（优化视觉体验） #

#datePicker:invalid {
    border-color: #dc3545;
}

代码说明 #

• formatDate函数：这是关键，date输入框只认YYYY-MM-DD格式，格式不对的话min/max属性完全无效
• setDateRange函数：每次页面打开都会重新计算有效日期范围，保证90天的限制始终是相对于当前日期的
• validateDateInput函数：防止用户手动输入（而非通过选择器选择）超出范围的日期，给出明确的错误提示
• CSS部分：利用:invalid伪类给不符合规则的输入框加红色边框，增强视觉反馈

这样就能实现你要的限制：用户只能选择今天到90天前的日期，且范围每天自动更新。

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