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

【问题标题】：How to force kendo-dateinput startdate to not equal enddate如何强制 kendo-dateinput startdate 不等于 enddate
【发布时间】：2019-12-19 18:47:15
【问题描述】：

是否可以让 Angular Dateinput 组件的 Kendo UI 不允许 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>

【问题讨论】：

标签： kendo-ui kendo-ui-angular2

【解决方案1】：

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

【讨论】：

【解决方案2】：

我稍微修改了 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 和 this 以了解如何在 javascript 中处理日期。

【讨论】：