Setting date range limit on kendo-daterange

Question

Requirement for my reporting page is: default date start = 1st of month (done) default date end = today's date (done)

Since we do not want application to crash with with data, Date range should not exceed 30 days. I am not being able to achieve this part. There is no min date, however I set it to '1/1/2015', but max date I am trying to set to whatever start date is selected, plus 30 days. Here is my code:

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

Got it working. Sharing the solution in case someone needs:

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); 
    }

}