How to force kendo-dateinput startdate to not equal enddate

Question

Is it possible to have the Kendo UI for Angular Dateinput component not allow the startDate to equal the endDate?

I have it styled like this, from the example, but I don't see any ways to restrict the range except for disallowing particular dates. Here all days are allowed, I just need the endDate to always be at minimum, the next day.

Thanks!

 <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 [animate]="false"></kendo-daterange-popup>
    </kendo-daterange>

score 2 · Answer 1 · answered Feb 03 '20 at 06:07

2

You can use max input on start date-input selector and min input on end date-input selector to limit the dates as explained here- https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges/#toc-date-ranges

answered Feb 03 '20 at 06:07

Pooja Mule

431
3
11

score 1 · Accepted Answer · answered Jan 10 '20 at 14:01

I slightly modified the Telerik example to make this work. Check out my stackblitz.

The idea is using the valueChange event emitter of both date inputs. Every time anything changes, both dates are checked and if they are identical, the range.end is increased by 1 day.

<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start" (valueChange)="fixEndDate($event)"></kendo-dateinput>

<kendo-dateinput kendoDateRangeEndInput [(value)]="range.end" (valueChange)="fixEndDate($event)"></kendo-dateinput>

public fixEndDate(e: any) {
      if(this.range.start == null || this.range.end == null) {
        return;
      }

      const startTime = this.range.start.getTime();
      const endTime = this.range.end.getTime();

      if(startTime == endTime) {
        console.log('start and end are the same. Fixing...')
        const dayAfter = new Date(endTime);
        dayAfter.setDate(dayAfter.getDate() + 1);
        this.range.end = dayAfter;
      }
}

Also check out this and this for working with dates in javascript.

How to force kendo-dateinput startdate to not equal enddate

2 Answers2