Jquery datepicker 验证不起作用(不通过编辑文本框使用 datepicker)

Question

我正在尝试验证datepicker，因为startDate应始终小于EndDate。如果我手动更改日期，则 StartDate 有效，但 EndDate 无效。

我的JavaScript代码:

$(document).ready(function () {
       $("#StartDate").datepicker({
        numberOfMonths: 1,
        onSelect: function (selected) {
            $("#EndDate").datepicker("option", "minDate", selected)
        }
    });
      $("#EndDate").datepicker({
       numberOfMonths: 1,
        onSelect: function (selected) {
            $("#StartDate").datepicker("option", "maxDate", selected)
        }
    });

});

我的.cshtml代码

 <div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.StartDate)
        @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control", placeholder = "Enter start date" })
        @Html.ValidationMessageFor(m => m.StartDate, "", new { @class = "error" })
    </div>
</div>

<div class="col-sm-6">
    <div class="form-group">
        @Html.LabelFor(m => m.EndDate)
        @Html.TextBoxFor(m => m.EndDate, new { @class = "form-control", placeholder = "Enter finish date" })
        @Html.ValidationMessageFor(m => m.EndDate, "", new { @class = "error" })
    </div>
</div>

任何人请帮助我。预先感谢您!

Answer 1

如果您希望手动更改日期(不通过编辑文本框来使用日期选择器)，请编写一个更改函数并相应地设置日期选择器的最大值。

将以下函数添加到您的 js 代码中。

$('#EndDate').on('change',function(){
    var selected=$('#EndDate').val();
    $("#StartDate").datepicker("option", "maxDate", selected)
});

 $('#StartDate').on('change',function(){
    var selected=$('#StartDate').val();
    $("#EndDate").datepicker("option", "minDate", selected)
});

DEMO