Question

我需要显示用户悬停特定日期的当天的标题或重要性。当用户将鼠标悬停在日历弹出窗口上时，例如：12月25日，我需要显示一条消息“圣诞节快乐”。

我尝试了以下HTML，但无法正常工作

<mat-form-field>
      <input matInput [matDatepicker]="picker" (click)="picker.open()" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker [dateClass]="dateClass" title="ariaLabel"></mat-datepicker>
    </mat-form-field>

ts文件

ariaLabel = (d: Date) => {
    const date = d.getDate();
    return (date === 25) ? 'Happy Christmas' : undefined;
  }

如何在特定日期用Angular材质实现自定义消息？

Answer 1

感谢question in stackoverflow，我们可以加入所有人

我真的不喜欢使用querySelectorAll，但是我认为那是唯一的方法，所以走吧

我们有一系列选择的日期

  dates = [
    { date: "2019-12-01", text: "one text" },
    { date: "2019-12-20", text: "another text" }
  ];

因此，首先我们将使用dateClass赋予特殊颜色

  dateClass = (d: Date) => {
    const dateSearch = this.dateToString(d);
    return this.dates.find(f => f.date == dateSearch)
      ? "example-custom-date-class"
      : undefined;
  };

我使用辅助函数将日期对象转换为字符串

  dateToString(date: any) {
    return (
      date.getFullYear() +
      "-" +
      ("0" + (date.getMonth() + 1)).slice(-2) +
      "-" +
      ("0" + date.getDate()).slice(-2)
    );
  }

如果我们的班级像

.example-custom-date-class {
  background: orange;
  border-radius: 100%;
}
.example-custom-date-class:hover::after {
  counter-increment: section; 
  content:attr(aria-label);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

我们有一个使用aria-label值的“工具提示”。因此，我们将更改arial标签。我们有一个功能

  displayMonth() {
    let elements = document.querySelectorAll(".endDate");
    let x = elements[0].querySelectorAll(".mat-calendar-body-cell");
    x.forEach(y => {
      const dateSearch = this.dateToString(
        new Date(y.getAttribute("aria-label"))
      );
      const data = this.dates.find(f => f.date == dateSearch);
      if (data) y.setAttribute("aria-label", data.text);
    });
  }

打开日历和单击导航按钮时我们需要打电话，所以我们需要使用类似

  streamOpened(event) {
    setTimeout(() => {
      let buttons = document.querySelectorAll("mat-calendar .mat-icon-button");

      buttons.forEach(btn =>
        this.renderer.listen(btn, "click", () => {
          setTimeout(() => {
            //debugger
            this.displayMonth();
          });
        })
      );
      this.displayMonth();
    });
  }

html

<mat-form-field class="example-full-width" >
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker (opened)="streamOpened($event)" [dateClass]="dateClass" #picker panelClass="endDate" ></mat-datepicker>
</mat-form-field>

还有stackblitz

角材料日期选择器如何显示标题

1 个答案: