在 Angular 5 中预设和重置 mat-datepicker

Question

在我的 Angular 5 应用程序中，我使用 Material Design (mat-datepicker) 中的 DatePicker。日期选择器的默认行为有效，但我无法预设日期并在关联的输入元素中重置它。有人可以帮忙吗？谢谢。日期选择器位于另一个包含组件 (sn-p 1) 中。

片段 1（包含页面）：

<div class="row">
  <div class="col col-md-4 col-sm-4">
    <matDatepicker [initDate]="newVisitDate" (newDatePickedEvent)="setNewVisitDate($event)"></matDatepicker>
  </div>
  <div class="col col-md-3 col-sm-3">
    <input [ngModel]="newVisitDate | date:'MM/dd/yyyy'" (ngModelChange)="setNewVisitDate($event)" class="form-control" type="date" name="newVisitDate" id="newVisitDate" #newVisitDateVar="ngModel" />
  </div>
</div>

片段 2 (mat-datepicker.html)：

<div class="datepicker-container">
  <mat-form-field>
    <input disabled matInput [matDatepicker]="pickedDate" (dateChange)="newDatePicked($event)" placeholder="New Visit Date" id="matSelectedDate">
    <mat-datepicker-toggle matSuffix [for]="pickedDate"></mat-datepicker-toggle>
    <mat-datepicker disabled="false" #pickedDate [startAt]="someDate"></mat-datepicker>
  </mat-form-field>
</div>

片段 3 (mat-datepicker.ts)：

import {
  Component,
  Output,
  EventEmitter,
  Input,
  OnInit
} from '@angular/core';
import {
  MatDatepickerInputEvent
} from '@angular/material';

/** @title Basic datepicker */
@Component({
  selector: 'matDatepicker',
  templateUrl: 'mat-datepicker.html',
  styleUrls: ['mat-datepicker.css']
})
export class matDatepickerComponent implements OnInit {
  @Input() initDate: Date;
  @Output() newDatePickedEvent: EventEmitter <Date> = new EventEmitter();
  someDate: Date;

  ngOnInit() {
    if (this.initDate === undefined) {
      this.someDate = new Date();
      console.log('matDatepicker.ngOnInit.initDate(using new Date())=', this.someDate);
    } else {
      this.someDate = this.initDate;
      console.log('matDatepicker.ngOnInit.initDate(using @input)=', this.someDate);
    }
  }

  newDatePicked(event: MatDatepickerInputEvent <Date> ): void {
    console.log('emitting matDatepickerCompont.newDatePicked()', event.value);
    this.newDatePickedEvent.emit(event.value);
  }
}

Answer 1

要预设日期，您可以执行以下操作：

datepicker-value-example.html

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

datepicker-value-example.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  date = new FormControl(new Date(100000000000));
}

Working snippet

编辑：具有自定义格式的新 snippet。如果您希望实际的材质元素显示自定义格式，您可以查看 Angular Material Datepicker page 中的 Datepicker with custom formats，即使在 StackBlitz 中打开它时它似乎无法正常工作。