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

如果您希望手动更改日期（不通过编辑文本框使用 datepicker），请编写一个 on change 函数并相应地设置 datepickers 的最大值。

将以下函数添加到您的 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

Answer 2

您好，我创建了一个类似的演示。 我认为您是否在页面的头部编写 JavaScript 代码，只需在视图的末尾编写相同的代码即可。

型号

public class DemoModel
{
    [Display(Name = "StartDate")]
    [Required(ErrorMessage = "Please Choose StartDate")]
    public DateTime? StartDate { get; set; }

    [Display(Name = "EndDate")]
    [Required(ErrorMessage = "Please Choose EndDate")]
    public DateTime? EndDate { get; set; }
}

查看

@model DemoMVC.Models.DemoModel
    @{ Layout = null;}
@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/datetimepicker/jquery-1.12.4.js"></script>
<script src="~/Scripts/datetimepicker/jqueryui.js"></script>
<link href="~/Scripts/datetimepicker/jqueryui.css" rel="stylesheet" />

<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>

<script type="text/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)
            }
        });

    });

</script>

输出