在 kendo-daterange 上设置日期范围限制答案

【问题标题】：Setting date range limit on kendo-daterange在 kendo-daterange 上设置日期范围限制
【发布时间】：2019-04-10 16:47:53
【问题描述】：

我的报告页面的要求是：默认日期开始 = 每月 1 日（完成）默认日期结束 = 今天的日期（完成）

由于我们不希望应用程序因数据而崩溃，因此日期范围不应超过 30 天。我无法实现这部分。没有最小日期，但是我将其设置为“2015 年 1 月 1 日”，但我试图将最大日期设置为选择的任何开始日期，再加上 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); 
}

【问题讨论】：

嗨，我觉得这是一个悬而未决的问题，因为我发现了这个forum link

标签： angular kendo-ui date-range

【解决方案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); 
    }

}

【讨论】：