Kendo DateRangePicker固定周范围：单次点击选日期异常问题

问题分析 #

你当前的代码直接修改range().end的方式无法触发Kendo控件的视图更新——因为Kendo的range()方法在无参数时仅返回当前范围的副本，修改副本不会同步到组件内部状态；另外还可能存在AngularJS脏检查未触发，导致模型更新后视图未同步的情况。

修正方案 #

1. 控制器代码调整 #

$scope.dateSelected = function (e) {
    const currentRange = $scope.dateRangePicker.range();
    const start = currentRange.start;
    
    // 仅在选中起始日期且未设置结束日期时触发自动填充逻辑
    if (start && !currentRange.end) {
        const end = moment(start).add(7, "days").toDate();
        
        // 更新数据模型
        $scope.model.fromDate = start;
        $scope.model.toDate = end;
        
        // 调用Kendo官方API设置日期范围，触发视图更新
        $scope.dateRangePicker.range({
            start: start,
            end: end
        });
        
        // 手动触发Angular脏检查，确保模型变更同步到视图
        if (!$scope.$$phase) {
            $scope.$apply();
        }
        
        $scope.dateRangePicker.close();
    }
};

2. 视图优化（可选，增强双向绑定清晰度） #

将日期范围绑定到一个单独的对象，避免分散的fromDate和toDate导致的同步问题：

<kendo-date-range-picker 
    k-scope-field="dateRangePicker" 
    k-options="{ 
        labels: false, 
        format: model.dateFormat, 
        change: dateSelected 
    }"
    k-range="model.dateRange"
></kendo-date-range-picker>

对应的控制器初始化：

// 初始化日期范围对象
$scope.model.dateRange = {
    start: $scope.model.fromDate,
    end: $scope.model.toDate
};

关键说明 #

• 使用官方API修改范围：必须通过range({start, end})方法设置日期范围，而非直接修改返回的range对象，这样才能触发Kendo控件的视图更新。
• 限制触发条件：通过start && !currentRange.end确保仅在用户选择起始日期时执行自动填充，避免干扰用户后续操作。
• 触发Angular脏检查：当在Angular上下文外修改模型时（比如Kendo事件回调），需要手动调用$apply()让框架同步视图。

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