问题描述
我需要显示用户悬停特定日期的当天的标题或重要性.当用户将鼠标悬停在日历弹出窗口上时,例如: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>
这篇关于角材料日期选择器如何显示标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!