在 Angular Material 日期选择器的左侧或右侧添加 div 以显示所选日期

Question

我想更改 Angular Material 日期选择器的样式，并向日期选择器添加框以显示所选日期，如下图所示：

我怎样才能做到这一点？ 任何帮助将不胜感激

Answer 1

例如，您可以创建一个新组件，其中日期选择器位于右侧，样式值位于左侧。可以利用

date

管道根据需要解析日期。

https://angular.io/api/common/DatePipe

https://material.angular.io/components/datepicker/overview#datepicker-inline-calendar

工作示例：https://stackblitz.com/edit/angular-1bjjgm-iscwxr?file=src%2Fapp%2Fdatepicker-inline-calendar-example.html

<div class="demo-flex-container">
  <div class="demo-selected-date">
    <p>Selected date: {{selected | date:'fullDate'}}</p>
    <p>Selected time: {{selected | date:'shortTime'}}</p>
  </div>
  
  <mat-card class="demo-inline-calendar-card">
    <mat-calendar [(selected)]="selected"></mat-calendar>
  </mat-card>
</div>

Answer 2

唯一的方法是创建一个像这样的自定义标题SO

如果你使用pannelClass

<mat-datepicker panelClass="custom" #picker
           [calendarHeaderComponent]="exampleHeader">
</mat-datepicker>

calendarHeader 可以是这样的

<!--see that it is "similar" to the original-->
<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <!--"move" de button prev -->
    <button
      mat-icon-button
      type="button"
      class="mat-calendar-previous-button"
      [disabled]="!previousEnabled()"
      (click)="customPrev()"
      [attr.aria-label]="prevButtonLabel"
    ></button>
    <!--add a mat-calendar-space-->
    <div class="mat-calendar-spacer"></div>

    <!--change the button to remove the arrow-->
    <button
      mat-button
      type="button"
      class="mat-calendar-period-button"
      (click)="currentPeriodClicked()"
      [attr.aria-label]="periodButtonLabel"
      cdkAriaLive="polite"
    >
      {{periodButtonText.toLowerCase()}}
    </button>

    <div class="mat-calendar-spacer"></div>

    <-- add HERE the "slide" div-->
    <div class="slide">
      {{this.calendar.selected|date:'EEEE, MMMM d, y h:mm a'}}
    </div>
    <ng-content></ng-content>

    <button
      mat-icon-button
      type="button"
      class="mat-calendar-next-button"
      [disabled]="!nextEnabled()"
      (click)="customNext()"
      [attr.aria-label]="nextButtonLabel"
    ></button>
  </div>
</div>

由于我们有一个面板的自定义类，我们可以在 styles.css

中添加

/*This "hidden" the month inside the calendar*/
.custom .mat-calendar-body-label{
  visibility:hidden
}
/*IMPORTANT, add padding to give space to the "slide"*/
.custom.mat-calendar{
  padding-left:100px; //<--use the same dimension than the slider
}
/*Our "slide" div*/
.custom .slide {
  position: absolute;
  left: 0;
  top:0;
  overflow-wrap: break-word;
  width:100px;  //<---width of the slider
  height:355px;
  color:white;
  background-color: royalblue;
  border-radius:.25rem 0 0 .25rem;
  padding:1rem;
  box-sizing: border-box;
}

您可以在这个stackblitz

中看到示例

注意：stackblitz 使用材质角度版本 8.1.3，我不知道材质是否有细微变化（类名或其他名称）检查代码