以編程方式設置角度材料日期選擇器值

Question

我在我的 angular 項目組件之一中使用了 angular material 日期選擇器。 該組件有兩個選項卡。 使用 *ng 如果我根據用戶單擊的內容一次只顯示一個。在一個選項卡中，用戶選擇一個日期，如果導航到同一組件的其他選項卡並返回上一個選項卡，我需要保留所選日期。

這就是我在HTML 端所做的：

<mat-form-field class="dropdownWidth">
      <input #dateInput matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker"
             placeholder="Choose a date"
             [value]="datePickerDate"
             [(ngModel)]="datePickerDate"
             (dateChange)="addDateEvent($event)"
             [disabled]="selectedOperator.length === 0 && userDateRange.length === 0">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在TS 文件中：

addDateEvent(event) {
   this.datePickerEvent = event;
   this.datePickerDate = new Date(`${event.value['_i'].month + 1}-${event.value['_i'].date}-${event.value['_i'].year}`);
   this.formatDate = moment(event.value).format('YYYY-MM-DD');
}

但是當我返回時，日期值不會保留。 有什么建議我怎么能做到這一點？

這是示例堆棧閃電戰

Answer 1

它不起作用，因為您沒有存儲選定的值。 所以在打字稿中創建一個變量：

yourDate: any;

HTML：

<p> YourDate  {{ yourDate | date }} </p>

<mat-form-field>
    <input matInput [(ngModel)]="yourDate" [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

可以在 stackblitz看到整個代碼

Answer 2

在您的示例中，您沒有使用任何綁定。 嘗試使用[(ngModel)] ，這樣它就會獲取並保持選定的值。

這樣做，它將起作用：

<mat-form-field>
          <input matInput [(ngModel)]="date" [matDatepicker]="picker" placeholder="Choose a date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>