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() opensStream 事件.这将在日历打开时触发.

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

根据文档:@Output('opened') opensStream: EventEmitter.

收到事件后，您可以通过 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屋！