Question

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

由于我们不希望应用程序随数据崩溃，因此日期范围不应超过30天。我无法实现这一部分。没有最小日期，但是我将其设置为“ 1/1/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); 
    }

}

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

1 个答案: