Jquery 日期选择器验证无效（不通过编辑文本框使用日期选择器）

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

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

Model

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

View

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

Output

Answer 2

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

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

Jquery 日期选择器验证无效（不通过编辑文本框使用日期选择器）

Jquery datepicker validation is not working (without the use of datepicker by editing the textbox)

asp.net-mvc

jquery

jquery-ui-datepicker