角材料日期选择器如何显示标题 [英] 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?

推荐答案

感谢此

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屋！