Question

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

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

https://i.imgur.com/KOoeQtn.png

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

Answer 1

您可以在剑道角度上为日期选择器指定一个最小值和一个最大值。

示例：-

@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/

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

1 个答案: