Mat-datepicker 值自动选择

Question

我正在创建一个提醒应用程序，但无法在 mat-datepicker 中设置日期（更像是预填）。我有一个对象

  resObj = {
    "taskId": 230,
    "whenToDo": "2020-05-10T00:00:00.000+0000",
    "wherToGo": "CityHall",
    "whatTodo": "Talk to mentor"
  }

在 .ts 文件中，我将 ngOnit() 上的日期格式更改为 10/04/2020

    this.doj = this.resObj.dojs

    this.doj = new DatePipe('en-US').transform(this.resObj.dojs, 'dd/MM/yyyy')

并在 HTML

                            <mat-form-field>
                                <input  [(ngModel)]="doj" name="dojs"  matInput [matDatepicker]="picker" placeholder="Date of Joining">
                                <mat-icon matSuffix>
                                    <img src="../../../assets/images/icons/purple_icons/icon-calendar.png" (click)="picker.open()">
                                </mat-icon>
                                <mat-datepicker #picker touchUi></mat-datepicker>
                            </mat-form-field>

有没有办法设置上面的日期，当用户打开页面时在日期选择器中选择，并且应该禁用从 "today's date and before" 开始的日期。

Answer 1

您可以通过添加 [formControl] 来设置默认日期。您可以设置 [min] 值以禁用今天之前的日期。

 <mat-form-field>
  <input [(ngModel)]="doj" name="dojs" matInput [matDatepicker]="picker" placeholder="Date of Joining"
    [formControl]="defaultDate" [min]="minDate">
  <mat-icon matSuffix>
    <img src="../../../assets/images/icons/purple_icons/icon-calendar.png" (click)="picker.open()">
  </mat-icon>
  <mat-datepicker #picker touchUi></mat-datepicker>
</mat-form-field>

并在 .ts 文件中设置值。

defaultDate = new FormControl(new Date(resObj.whenToDo))

要禁用今天和过去几天，

minDate: Date;

ngOnInit() { 
  this.minDate = new Date();
  this.minDate.setDate(this.minDate.getDate() + 1)
}

Mat-datepicker 值自动选择

Mat-datepicker value autoselected

html

javascript

datepicker

angular-material

angular