如何强制 kendo-dateinput startdate 不等于 enddate

Question

是否可以让 Kendo UI for Angular Dateinput 组件不允许 startDate 等于 endDate？

根据示例，我将其设置为这样的样式，但除了不允许特定日期外，我看不到任何限制范围的方法。这里所有的日子都是允许的，我只需要 endDate 总是最小，第二天。

谢谢！

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

Answer 1

我稍微修改了 Telerik 示例以使其工作。查看我的 stackblitz.

这个想法是使用两个日期输入的 valueChange 事件发射器。每次有任何变化时，都会检查两个日期，如果它们相同，则 range.end 增加 1 天。

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

另请查看 this and this 以了解如何处理 javascript 中的日期。

Answer 2

您可以在开始日期输入选择器上使用最大输入，在结束日期输入选择器上使用最小输入来限制日期，如此处所述- https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges/#toc-date-ranges

如何强制 kendo-dateinput startdate 不等于 enddate

How to force kendo-dateinput startdate to not equal enddate

kendo-ui

kendo-ui-angular2