角度材料日期选择器如何显示标题 [英] Angular material date picker how to show the title

问题描述

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

I need to show the title or importance of the day when user hover particular day. When user mouse over the calendar popup eg: December 25th i need to show a message "Happy Christmas".

我尝试使用 HTML 但它不起作用

I tried following HTML but its not working

<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 材料中实现特定日期的自定义消息?

How to implement custom message on particular day in Angular material?

推荐答案

感谢这个 stackoverflow 中的问题 我们可以加入所有

Thanks to this question in stackoverflow we can join all

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

Really I don't like use querySelectorAll, but I think that is the only way, so go

我们有一组选定日期的方式

We has an array of selected dates in the way

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

所以，首先我们要使用 dateClass 来赋予一个特殊的颜色

So, first we are going to use dateClass to give a special color

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

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

I use a auxiliar function to convert date object to string

  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 标签.我们有一个功能

We has a "tooltip" that use the value of aria-label. So, we are going to change the arial label. We has a function

  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);
    });
  }

我们需要在日历打开和导航按钮被点击时调用，所以我们需要使用类似

That we need call when the calendar is opened and when the buttons of navigation are clicked, so we need use some like

  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

这篇关于角度材料日期选择器如何显示标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！