<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
@Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "" })
<div class="col-md-12 zero-padding-left">
<div class="col-md-6 zero-padding-left">
@Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger", @id = "StartDateMessage" })
</div>
<div class="col-md-6">
@Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
@Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "" })
<div class="col-md-12 zero-padding-left">
<div class="col-md-6 zero-padding-left">
@Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger", @id = "EndDateMessage" })
</div>
<div class="col-md-6">
@Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#StartTime').kendoTimePicker({ format: "h:mm tt" });
$('#EndTime').kendoTimePicker({ format: "h:mm tt" });
function startChange() {
var fromDate = start.value(),
toDate = end.value();
if (fromDate) {
fromDate = new Date(fromDate);
fromDate.setDate(fromDate.getDate());
end.min(fromDate);
$("#EndDate").data("kendoDatePicker").value(fromDate);
} else if (toDate) {
start.max(new Date(toDate));
} else {
toDate = new Date();
start.max(toDate);
end.min(toDate);
}
}
function endChange() {
var toDate = end.value(),
fromDate = start.value();
if (toDate) {
toDate = new Date(toDate);
toDate.setDate(toDate.getDate());
start.max(toDate);
} else if (fromDate) {
end.min(new Date(fromDate));
} else {
toDate = new Date();
start.max(toDate);
end.min(toDate);
}
}
var start = $("#StartDate").kendoDatePicker({
change: startChange,
min: new Date(),
}).data("kendoDatePicker");
var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
$("#StartDate").data("kendoDatePicker");
var end = $("#EndDate").kendoDatePicker({
change: endChange
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
$("#EndDate").data("kendoDatePicker");
});
</script>