如果开始日期 > 结束日期剑道日期选择器，则触发验证

Question

I'm trying to modify my sample application using this Kendo demo

<div class="form-group">
    @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "control-label col-md-2 k-label" })
    <div class="col-md-10">    
        @(Html.Kendo().DatePicker().Name("StartDate").Value(Model.StartDate).HtmlAttributes(new { style = "width:250px"}).Events(e => e.Change("startChange"))) 

        @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "control-label col-md-2 k-label" })
    <div class="col-md-10">
        @(Html.Kendo().DatePicker().Name("EndDate").Value(Model.EndDate).HtmlAttributes(new { style = "width:250px"}).Events(e => e.Change("endChange")))               

        @Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
    </div>
</div>

<script>
    function startChange() {
        var endPicker = $("#EndDate").data("kendoDatePicker"),
            startDate = this.value();
        debugger;
        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            endPicker.min(startDate);

            debugger;

            var endDateValue = endPicker.value();

            if (startDate > endDateValue)
            {
                debugger;
                var validator = $("#StartDate").kendoValidator({
                    rules:
                    {
                        datepicker: function (input)
                        {
                            var stDate = $("#StartDate").data("kendoDatePicker").value();
                            var enDate = $("#EndDate").data("kendoDatePicker").value();

                            if (stDate > enDate)
                            {
                                debugger;
                                return false;

                            } else {
                                return true;
                            }
                        }
                    },
                    messages: {
                        datepicker: "Start Date Should be less than End Date!"
                    }
                }).data("kendoValidator");
            }
        }
    }

    function endChange() {
        var startPicker = $("#StartDate").data("kendoDatePicker"),
            endDate = this.value();

        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            startPicker.max(endDate);

            debugger;
            var startDateValue = startPicker.value();

            if (startDateValue > endDate) {
                debugger;
                var validator = $("#EndDate").kendoValidator({
                    rules: {
                        datepicker: function (input)
                        {
                            var stDate = $("#StartDate").data("kendoDatePicker").value();
                            var enDate = $("#EndDate").data("kendoDatePicker").value();

                            if (stDate > enDate)
                            {
                                debugger;
                                return false;
                            }
                            else
                            {
                                return true;
                            }
                        }
                    },
                    messages: {
                        datepicker: "End Date Should be greater than Start Date!"
                    }
                }).data("kendoValidator");
            }

        }
    }
</script>

In here I'm trying to add custom validation, if start date > end date

This one working for initial changes, but after second change onwards validations not triggering, how can I trigger this validation properly

Answer 1

You can achieve using jquery. Please set the id or class name for that date picker and use below code

var inputdate1= $('#inputdateid1').data("kendoDatePicker").value();
var inputdate2= $('#inputdateid2').data("kendoDatePicker").value();
if (new Date(inputdate1) > new Date(inputdate2))
{
      alert(" Your alert message !");
}