每次选择另一个日期时如何在剑道日期选择器中设置最大日期答案

【问题标题】：How to set max date in a kendodatepicker every time another date is chosed每次选择另一个日期时如何在剑道日期选择器中设置最大日期
【发布时间】：2022-01-19 14:39:53
【问题描述】：

我有两个 kendodatepicker“startDate”和“endDate”。我希望每次用户在 startdate 中设置日期时，建立从所选日期前一个月的最大日期以在 endDate datepicker 中选择。

我是第一次这样设置：

 $("#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()
    });

我尝试设置最大值，每次更改 startDate 选择器时：

$("#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])))
    })

它不起作用，我没有收到错误。我怎样才能做到这一点？非常感谢您的宝贵时间。

我正在使用这个：

剑道用户界面
JavaScript
ASP .NET MVC
剃刀
jquery

【问题讨论】：

也许这可行，（未经测试）jsfiddle.net/h68uoxtn
@CarstenLøvboAndersen 我遇到了这个异常“异常未处理：TypeError：dateEndDatePicker.setOptions 不是函数”

标签： javascript jquery asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案1】：

您可以在 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);
    }
}

在 razor 文件中，您可以像这样创建日期选择器

<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>

【讨论】：