如何限制HTML5 date类型仅可选择当前日期前后5天

你当前的代码只设置了最小日期为当天，要实现前后5天的选择范围，需要同时计算前5天作为最小日期、后5天作为最大日期，再分别绑定到input的min和max属性上。以下是修改后的完整实现：

$(function() {
    // 工具函数：将Date对象格式化为YYYY-MM-DD的标准格式
    function formatDate(date) {
        const year = date.getFullYear();
        // 月份从0开始计数，需加1；不足两位自动补0
        const month = String(date.getMonth() + 1).padStart(2, '0');
        // 日期不足两位自动补0
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    const today = new Date();
    // 计算当前日期前5天的日期
    const minDate = new Date(today);
    minDate.setDate(today.getDate() - 5);
    // 计算当前日期后5天的日期
    const maxDate = new Date(today);
    maxDate.setDate(today.getDate() + 5);

    // 给目标日期输入框批量设置min和max属性
    $('#delivery_date').attr({
        'min': formatDate(minDate),
        'max': formatDate(maxDate)
    });
});

关键说明 #

• 日期格式化：用padStart(2, '0')替代原代码的if判断，更简洁地实现月份、日期的两位补零逻辑。
• 日期偏移处理：通过setDate()方法直接对日期做加减，会自动处理跨月、跨年的边界情况（比如1月1日减5天会自动转换为去年12月27日）。
• 批量属性设置：用jQuery的attr()传入对象，一次性完成min和max的赋值，代码更紧凑。

注意事项 #

• 确保页面已正确引入jQuery库，否则无法使用$选择器。
• HTML中的日期输入框需设置id="delivery_date"，与代码中的选择器对应。

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