i have two kendodatepickers "startDate" and "endDate". I want every time the user set a date in startdate, establish the max date one month forward from the selected date to pick in endDate datepicker.
I am setting up the first time in this way:
$("#datStartDate").kendoDatePicker({
start: "month",
depth: "year",
format: "dd/MM/yyyy",
dateInput: true,
change: (e) => {
return moc.rangeStartDate("datStartDate", "datEndDate");
},
min: new Date(1900, 0, 1),
max: new Date(),
value: new Date()
});
$("#datEndDate").kendoDatePicker({
start: "month",
depth: "year",
format: "dd/MM/yyyy",
dateInput: true,
max: new Date(),
change: (e) => {
return moc.rangeEndDate("datStartDate", "datEndDate");
},
value: new Date()
});
I tried this to set the max value, each time the startDate picker is cheanged:
$("#datStartDate").change(() => {
let startDate = ($("#datStartDate").val()).split("/");
console.log("cambio de fecha", parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0]))
let datePicker = $("#datEndDate").data("kendoDatePicker");
datePicker.max(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])));
datePicker.value(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])))
})
It doesnt works and i dont get an error. How can i do this? Thank you so much for you time.
I am using this:
you can use it in Jquery
function startChange() {
var endPicker = $("#dtpStartDate").data("kendoDatePicker"),
startDate = this.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
endPicker.max(startDate + 30);
}
}
function endChange() {
var startPicker = $("#dtpEndDate").data("kendoDatePicker"),
endDate = this.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
startPicker.max(endDate - 30);
}
}
and in razor files you can create datepickers like this
<div class="form-group">
<label class="col-md-4 control-label">@Html.LabelFor(m => m.StartDate)</label>
<div class="col-md-8">
@(Html.Kendo().DatePickerFor(m => m.StartDate)
.HtmlAttributes(new { @Id = "dtpStartDate", style = "width:100%", required = "required", validationMessage = "Select Start Date" })
.Events(e => e.Change("startChange")))
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">@Html.LabelFor(m => m.EndDate)</label>
<div class="col-md-8">
@(Html.Kendo().DatePickerFor(m => m.EndDate)
.HtmlAttributes(new { @Id = "dtpEndDate", style = "width:100%", required = "required", validationMessage = "Select End Date" })
.Events(e=>e.Change("endChange")))
</div>
</div>