I have a start date and end date validation where user can not choose a end date previous that of start date. I have written code on datepicker change event and it is working fine. But if i have already have value in the start date from the model and didnt pick from the datepicker, on end date change event the value of start date is null.
View Code/ works fine if the value is picked from datepicker
<
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", onkeydown = "javascript:return false;", required = "required" }).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", onkeydown = "javascript:return false;" }).Events(e => e.Change("endChange")))
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
</
div
>
</
div
>
function startChange() {
var endPicker = $("#EndDate").data("kendoDatePicker"),
startDate = this.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate() + 1);
endPicker.min(startDate);
}
}
function endChange() {
var startPicker = $("#StartDate").data("kendoDatePicker"),
endDate = this.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate() - 1);
startPicker.max(endDate);
}
}