How to limit the range selection in a datepicker with angular kendo

Question

I want to set a limit daterange in Angular with Kendo-ui.

I have a datepicker in Angular with kendo-ui as seen in the screenshot below:

I need that the user can only select a limit of fifteen days in any month and any year. For example, I select july 1 and only the end-date is july fifteen, if user select more days like twenty days, disable a bottom in the div and add a border in the dateranges permit (15 days). How can i add this daterange limit

Answer 1

You can give a min and a max value for the date picker on kendo angular..

Example:-

@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);
}

And in the end make the rangeValidation property to true to if ur using form validations..

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

So it will make the input invalid if user typed an invalid date without selecting from the date picker..

More details:- https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges/