Angular 2材质日期选择器突出显示特殊日子 [英] Angular 2 material datepicker highlight special days

问题描述

我一直在寻找一种方法来将日历中的特殊日子标记为 用户.我知道您可以在日期选择器中禁用某些日期，但是我会 希望能够标记/设置特定日期的样式，例如更改背景/颜色 在具有特殊值的日期(例如假期)上显示为红色，而不禁用它们.

I've been looking around for a way to mark up special days in the calendar to the user. I know that you can disable certain days in the datepicker but I would like to be able to just mark/style certain days, for instance change background/color to red on dates that have a special value, holidays for instance, and not disable them.

我尚未找到任何方法来完成此操作，如果我错过了明显的内容，对不起.有没有人找到执行此操作的方法，或者在这种情况下仅创建自己的日期选择器会更容易?

I have not found any way to do this, sorry if I have missed something obvious. Have anyone found a way to do this or is it easier to just make my own datepicker in this case?

推荐答案

如果查看打开的日期选择器的HTML，您会看到每天都由td表示，如下所示:

If you look at the HTML of an open datepicker, you will see each day is represented by a td, like so:

<td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 4, 2018" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">4</div></td>

我们可以从HTML派生出一个aria-label和一个mat-calendar-body-cell类.

What we can derive from that HTML is an aria-label and a class of mat-calendar-body-cell.

要实现所需的目标，可以使用@Output() openedStream事件.只要打开日历，就会触发此操作.

To achieve what you want, you can use the @Output() openedStream event. This will be triggered whenever the calendar is opened.

根据文档:@Output('opened') openedStream: EventEmitter<void>.

一旦收到事件，就可以通过mat-calendar-body-cell类查询DOM，该类具有aria-label属性和特定日期的组合，如果存在匹配项，则可以向这些匹配项中添加一个类

Once you receive the event, you can then query the DOM by the mat-calendar-body-cell class that has a combination of an aria-label attribute with a certain date, and if there are matches then you can add a class to those matches.

让我知道您是否对此有任何疑问.但是您应该能够逐步遵循该准则，以实现所需的目标.

Let me know if you have any issues with that. But you should be able to follow that rubric step by step to achieve what you want.

有关datepicker API的更多选项，请在文档此处中查看.

For more options from the datepicker API, look at the docs here.

这篇关于Angular 2材质日期选择器突出显示特殊日子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！