Как ограничить выбор диапазона в датчике с угловым кендо - PullRequest
Новая
       21

Как ограничить выбор диапазона в датчике с угловым кендо

0 голосов
/ 04 июля 2019

Я хочу установить предельный диапазон дат в Angular с помощью Kendo-ui.

У меня есть средство выбора даты в Angular с kendo-ui, как показано на скриншоте ниже:

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

Мне нужно, чтобы пользователь мог выбрать ограничение в пятнадцать дней в любом месяце и в любом году. Например, я выбираю 1 июля, и только конечной датой будет пятнадцать июля, если пользователь выберет больше дней, например, двадцать дней, отключит нижнюю часть в div и добавит границу в разрешении на диапазон дат (15 дней). Как я могу добавить этот предел даты

1 Ответ

1 голос
/ 09 июля 2019

Вы можете задать минимальное и максимальное значения для средства выбора даты в угловом кендо.

Пример: - 

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

...