时间戳

首页 > 解决方案 > 以编程方式更改结束日期时间

angular - 以编程方式更改结束日期时间

问题描述

我想在运行时更改我的最小日期。

    <input class="form-control" id="endDateTime" [owlDateTime]="endDateTime" [owlDateTimeTrigger]="endDateTime"
                  [min]='endDateTimePickerConfig.min' placeholder="End Date Time" formControlName="endDateTime">
                <owl-date-time #endDateTime [firstDayOfWeek]='endDateTimePickerConfig.firstDayOfWeek'
                  [hour12Timer]='endDateTimePickerConfig.hour12Timer'></owl-date-time>

  public startDateTimePickerConfig = {
    min: new Date(),
    firstDayOfWeek: 1,
    hour12Timer: true
  };

  public endDateTimePickerConfig = Object.assign({}, this.startDateTimePickerConfig);;

    constructor() {
          this.initializeEndDate(this.startDateTimePickerConfig.min);
        }

      private initializeEndDate(startDateTime: Date): void {
        this.endDateTimePickerConfig.min = this.incrementMinutes(this.endDateTimePickerConfig.min, 1);
      }

    private incrementMinutes(date: Date, minutes: number): Date {
        return new Date(date.getFullYear(),
          date.getMonth(),
          date.getDate(),
          date.getHours(),
          date.getMinutes() + minutes,
          date.getSeconds(),
          date.getMilliseconds());
      }

但是，当打字稿中的最小日期更改时，UI 仅刷新选择框https://i.stack.imgur.com/5MvME.png，但在单击设置后，输入会被旧分钟填充。https://i.stack.imgur.com/imhja.png这是一些奇怪的行为。有什么建议么？PS：https ://www.npmjs.com/package/ng-pick-datetime

标签： angulardatedatepickerdatetimepickerangular7

解决方案

我想问题是您正在更改对象的属性值（this.endDateTimePickerConfig.min）。尝试创建一个新的“普通”属性并将其设置为 [min] 属性。

例子：

.ts
minEndDateTimePickerConfig: Number;
...
private initializeEndDate(startDateTime: Date): void {
   this.minEndDateTimePickerConfig = this.incrementMinutes(this.minEndDateTimePickerConfig, 1);
}

.html
[min]='minEndDateTimePickerConfig'

推荐阅读