Angular 日期选择器设置日期

Question

我有一个带有数据选择器的屏幕。当我已经有一个数据参数时，它会在我的日历中选择 2 个日期：日期参数加上当天的日期。如果我有一个日期作为参数怎么办，以便它选择我作为日期作为参数而不是当天的日期

    <mat-label>Select a date</mat-label>
        <input matInput [matDatepicker]="picker"
        [(ngModel)]="myDate"
        (dateChange)="onChange($event)"
        placeholder="">
        <mat-datepicker #picker ></mat-datepicker>
        <mat-datepicker-toggle matSuffix [for]="picker" >

        </mat-datepicker-toggle>

Answer 1

这类似于此问答：

Angular Material 将样式应用到今天的日期，这并不意味着选择了日期它只是以某种方式出现，因为它 CSS

您可以通过添加此选项并将其更改为您需要的外观来定位组件 CSS 中选定的今天节点。

::ng-deep.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  background-color: white;
}

Answer 2

我不喜欢使用 ::ng-deep，所以我的方法是添加 styles.css（以应用于所有应用程序），例如

.noTodayDatepicker .mat-calendar-body-today:not(.mat-calendar-body-selected){
    border-color:transparent!important;
}
.noTodayDatepicker .mat-calendar-body-today:not(:hover):not(.mat-calendar-body-selected){
  background-color:transparent!important;
}
.noTodayDatepicker .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: none;
}

然后就可以使用panelClass了

  <mat-datepicker #picker panelClass="noTodayDatepicker"></mat-datepicker>

见stackblitz

Angular 日期选择器设置日期

Angular datepicker setDate

date

datepicker

angular