tengo dos kendodatepickers "startDate" y "endDate". Quiero que cada vez que el usuario establezca una fecha en la fecha de inicio, establezca la fecha máxima un mes a partir de la fecha seleccionada para elegir en el selector de fechas de fecha de finalización.
Estoy configurando la primera vez de esta manera:
$("#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() });Intenté esto para establecer el valor máximo, cada vez que se cambia el selector de fecha de inicio:
$("#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]))) })No funciona y no me da error. ¿Cómo puedo hacer esto? Muchas gracias por tu tiempo.
estoy usando esto:
puedes usarlo en 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); } }y en archivos razor puedes crear selectores de fecha como este
<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>