You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap Datepicker禁用未来日期后仍可手动输入未来日期问题咨询

你需要同时补全JavaScript侧的输入拦截逻辑、以及ViewModel侧的后端校验,二者不是二选一的关系,各自负责不同场景的校验职责。

JavaScript侧配置补全

你当前初始化代码中的maxDate: '+0d'配置仅作用于日历面板的点选场景,不会拦截键盘手动输入的内容,确实存在配置遗漏。需要补全输入解析、失焦校验的相关逻辑,参考代码如下:

$('.datepicker').datepicker({
    dateFormat: "mm/dd/yy",
    changeMonth: true,
    changeYear: true,       
    firstDay: 1,
    maxDate: '+0d',
    forceParse: true, // 强制解析用户输入的字符串,不符合格式的内容会自动回滚到上一个合法值
    beforeShow: function(input) {
        // 可选:限制键盘只能输入数字、日期分隔符和基础控制键,减少无效输入
        $(input).off('keydown').on('keydown', function(e) {
            const allowedKeyCodes = [8,9,37,39,46,191]; // 退格、Tab、方向键、删除、斜杠分隔符
            const isNumberKey = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
            if (allowedKeyCodes.includes(e.keyCode) || isNumberKey) return true;
            e.preventDefault();
        })
    },
    onClose: function() {
        // 日期面板关闭/输入框失焦时,校验输入值是否超出上限
        const inputDate = $(this).datepicker('getDate');
        const today = new Date();
        today.setHours(0,0,0,0);
        if (inputDate && inputDate > today) {
            $(this).datepicker('setDate', today); // 自动修正为今日,也可改为清空输入+错误提示
            alert('日期不能晚于今日');
        }
    }
});
ViewModel侧数据注解配置

前端JS校验只能提升正常用户的使用体验,无法防范恶意请求(用户可禁用JS、直接修改前端代码、构造自定义请求绕过前端校验),因此后端必须做兜底校验。
由于你的EndOfWeek属性是string类型,无法直接使用原生日期范围校验特性,可自定义轻量校验特性实现:

using System.ComponentModel.DataAnnotations;
using System.Globalization;

// 自定义校验特性:判断日期不晚于当日
public class NoFutureDateAttribute : ValidationAttribute
{
    public override bool IsValid(object value)
    {
        if (value == null || string.IsNullOrWhiteSpace(value.ToString()))
            return true; // 空值校验交给Required特性处理
        // 日期格式和前端datepicker配置保持一致
        if (DateTime.TryParseExact(value.ToString(), "MM/dd/yy", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime inputDate))
            return inputDate.Date <= DateTime.Today;
        return false;
    }
}

// ViewModel属性标注
[NoFutureDate(ErrorMessage = "结束日期不能晚于今日")]
public string EndOfWeek { get; set; }

提示:如果不想自定义校验特性,也可以在表单提交对应的Action方法中手动解析EndOfWeek字段做范围判断,只要保证后端校验逻辑不缺失即可。

内容的提问来源于stack exchange,提问作者Ram P

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 05:27:21