ASP.NET模态框中Date控件Change事件未触发问题求助

云原生阿岚

2026-6-30

问题解决步骤

1. 修正ID匹配错误

你JS代码里用的选择器是$('#VencData')，但HTML中日期输入框的ID是vencimento，两者不匹配，这是事件完全没触发的核心原因之一。先把选择器改成和HTML一致：

$('#vencimento').on('change', function () {
    console.log("Evento change disparado");
    // 后续逻辑...
});

2. 针对模态框动态元素使用事件委托

模态框通常是动态渲染的（比如通过JS加载或弹窗后才生成DOM），直接绑定事件会因为元素不存在而失效。改用事件委托，把事件绑定到静态的父元素（比如模态框容器，或者document）上：

$(document).on('change', '#vencimento', function () {
    console.log("Evento change disparado");
    var dataVencimento = new Date($(this).val());
    var dataAtual = new Date();
    // 生成当月第一天的日期对象
    var primeiroDiaMesAtual = new Date(dataAtual.getFullYear(), dataAtual.getMonth(), 1);
    if (dataVencimento < primeiroDiaMesAtual) {
        alert('到期日期不能早于当月');
        $(this).val('');
    }
});

3. 更高效的UI层面限制（可选）

原生date输入框支持通过min属性直接限制可选日期，不用依赖JS事件校验，体验更友好：

<div class="form-group">
    <label for="vencimento">Data de Vencimento:</label>
    <input type="date" class="form-control" id="vencimento" name="Nota.Vencimento" min="">
</div>

在模态框显示时，动态设置min属性为当月第一天：

// 生成当月第一天的YYYY-MM-DD格式字符串
function getFirstDayOfCurrentMonth() {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`;
}

// 模态框显示时触发设置
$('#你的模态框ID').on('show.bs.modal', function () {
    $('#vencimento').attr('min', getFirstDayOfCurrentMonth());
});