angular - 如何使用角度剑道限制日期选择器中的范围选择

Question

我想用 Kendo-ui 在 Angular 中设置一个限制日期范围。

我在 Angular 中有一个带有 kendo-ui 的日期选择器，如下面的屏幕截图所示：

我需要用户在任何月份和任何年份只能选择十五天的限制。例如，我选择 7 月 1 日，只有结束日期是 7 月 15 日，如果用户选择更多天，如 20 天，请禁用 div 中的底部并在日期范围许可（15 天）中添加边框。如何添加此日期范围限制

Answer 1

您可以为 kendo angular 上的日期选择器提供最小值和最大值。

例子：-

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>Only values between {{min | kendoDate:'d'}} and {{max | kendoDate:'d'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        </div>
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-datepicker
                [min]="min"
                [max]="max"
                [(ngModel)]="value"
                #dateModel="ngModel"
            ></kendo-datepicker>
        </div>
    `
})

class AppComponent {
    public min: Date = new Date(2000, 2, 10);
    public max: Date = new Date(2002, 2, 10);
    public value: Date = new Date(2001, 2, 10);
}

最后，如果您使用表单验证，则将 rangeValidation 属性设置为 true。

<kendo-datepicker
                    [min]="min"
                    [max]="max"
                    [rangeValidation]="true"
                    [(ngModel)]="value"
                    #dateModel="ngModel"
                >
</kendo-datepicker>

因此，如果用户在没有从日期选择器中选择的情况下输入了无效的日期，它将使输入无效。

更多细节：- https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges/