Установка предела диапазона дат в кендо-дате

Question

Требование к моей странице отчета: дата начала по умолчанию = 1-е число месяца (выполнено), дата окончания по умолчанию = сегодняшняя дата (выполнено)

Поскольку мы не хотим, чтобы приложение аварийно завершало работу с данными, диапазон дат долженне превышать 30 дней.Я не могу достичь этой части.Минимальной даты нет, однако я установил ее на «01.01.2015», но максимальную дату я пытаюсь установить на любую выбранную дату начала, плюс 30 дней.Вот мой код:

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { firstDayOfMonth, lastDayOfMonth } from '@progress/kendo-date-math';
import { addDays } from '@progress/kendo-date-math';

const date = new Date();
const firstDay = firstDayOfMonth(date); //returns first date of the month, `2000-11-1`

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
        </div>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
            </label>
            <kendo-daterange-popup>
                <ng-template kendoDateRangePopupTemplate>
                    <kendo-multiviewcalendar kendoDateRangeSelection  [min]="min" [max]="max">
                    </kendo-multiviewcalendar>
                </ng-template>
            </kendo-daterange-popup>

        </kendo-daterange>
    `,
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
      }
    `]
})
export class TestComponent {
    public range: SelectionRange = { start: firstDay, end: new Date() };
    min = new Date('1/1/2015');
    max = addDays(this.range.start, 30); 
}

Answer 1

Получил это работает.Поделиться решением, если кому-то нужно:

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { firstDayOfMonth } from '@progress/kendo-date-math';
import { addDays } from '@progress/kendo-date-math';

const date = new Date();
const firstDay = firstDayOfMonth(date); //returns first date of the month, `2000-11-1`

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}<br/>
            max: {{max}}<br/>
            StartDateSelected: {{this.range.start}}<br/>
        </div>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start" (valueChange)="onChange($event)"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
            </label>
            <kendo-daterange-popup>
                <ng-template kendoDateRangePopupTemplate>
                    <kendo-multiviewcalendar kendoDateRangeSelection  [min]="min" [max]="max">
                    </kendo-multiviewcalendar>
                </ng-template>
            </kendo-daterange-popup>

        </kendo-daterange>
    `,
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
      }
    `]
})
export class TestComponent {
    public range: SelectionRange = { start: firstDay, end: new Date() };

  //  min = new Date('1/1/2015');
    max = addDays(this.range.start, 30); 

    public onChange(value: Date): void {

        this.min = value;
        this.max = addDays(this.min, 30); 
    }

}