如何在选择Kendo开始日期后自动更新结束DatePicker的值

我来帮你搞定这个需求～你已经实现了结束日期必须晚于开始日期的限制，现在要加个「选完开始日期，结束日期自动跟过去」的功能，下面是具体的实现方案：

步骤1：确保控件初始化正确 #

先确认你的Razor代码生成的DatePicker控件ID是StartDate和EndDate（对应Model里的属性），示例代码如下：

<div class="form-group">
    @Html.LabelFor(m => m.StartDate, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.Kendo().DatePickerFor(m => m.StartDate).HtmlAttributes(new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.EndDate, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.Kendo().DatePickerFor(m => m.EndDate).HtmlAttributes(new { @class = "form-control" })
    </div>
</div>

步骤2：编写JavaScript实现同步逻辑 #

在页面的脚本块里，我们需要获取两个DatePicker的实例，设置初始值，然后给开始日期绑定change事件来同步结束日期：

$(document).ready(function() {
    // 拿到两个DatePicker的实例
    const startPicker = $("#StartDate").data("kendoDatePicker");
    const endPicker = $("#EndDate").data("kendoDatePicker");
    
    // 页面加载时默认都设为当前日期
    const today = new Date();
    startPicker.value(today);
    endPicker.value(today);
    
    // 先设置结束日期的最小值为开始日期（保留你原来的限制逻辑）
    endPicker.min(startPicker.value());
    
    // 给开始日期绑定变化事件
    startPicker.bind("change", function() {
        // 获取选中的开始日期
        const selectedStart = this.value();
        // 把结束日期同步成选中的开始日期
        endPicker.value(selectedStart);
        // 同时更新结束日期的最小值，确保后续不能选更早的日期
        endPicker.min(selectedStart);
    });
});

关键说明 #

• 用data("kendoDatePicker")获取控件实例，才能调用Kendo提供的value()、min()这些API；
• 同步结束日期的同时，一定要更新它的最小值限制，这样原来的「结束日期不能早于开始日期」的规则依然生效；
• 初始值设置确保页面加载时两个控件都显示当前日期，符合你的需求。

这样调整后，用户选完开始日期，结束日期会自动变成同一个日期，而且后续选结束日期时还是只能选大于等于开始日期的选项，完美满足你的要求～

内容的提问来源于stack exchange，提问作者mateicoman