[SOLVED] Kendo daterangepicker with fixed range - just one click in calendar is enough

Kendo daterangepicker with fixed range - just one click in calendar is enough

I have a kendo-date-range-picker and I know that my range is fixed to one week.

What I want to achieve is to open the calendar, click just once (to select the starting date), fill both fields (start and end) and close the calendar.

In my controller I'm able to manually calculate the end date, push it to the widget and close the widget by this code:

// View
<kendo-date-range-picker k-scope-field="dateRangePicker" 
                         k-options="{ labels: false, format: model.dateFormat, change: dateSelected, range: { start: model.fromDate, end: model.toDate } }"

// Controller
$scope.dateSelected = function (change) {
    const start = $scope.dateRangePicker.range().start;
    const end = moment(start).add(7, "days").toDate();
    $scope.model.toDate = end;

    $scope.dateRangePicker.range().end = $scope.model.toDate;
    $scope.dateRangePicker.close();
};

This results into closed caledar but "empty" end field (there is the default string in it).

Any ideas?

Solution

Try replacing this:

$scope.dateRangePicker.range().end = $scope.model.toDate;

With this:

$scope.dateRangePicker.range({
    start: $scope.dateRangePicker.range().start, 
    end: $scope.model.toDate
});