Question

我一直在寻找一种方法来标记日历中的特殊日子用户。我知道你可以在datepicker中禁用某些天但我愿意喜欢能够标记/样式某些日子，例如更改背景/颜色在具有特殊值的日期上红色，例如假日，而不是禁用它们。

我还没有找到任何方法这样做，对不起，如果我错过了一些明显的事情。有没有人找到这样做的方法，或者在这种情况下更容易制作我自己的日期选择器？

Answer 1

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

<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类。

要实现您的目标，您可以使用@Output() openedStream事件。无论何时打开日历，都会触发此操作。

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

收到事件后，您可以通过mat-calendar-body-cell类查询DOM，该类具有aria-label属性与特定日期的组合，如果有匹配则可以添加这些比赛的课程。

如果您对此有任何疑问，请与我们联系。但是你应该能够一步一步地遵循这个规则来实现你想要的目标。

有关datepicker API的更多选项，请查看文档here。

Answer 2

html：

 let portal = portalNode()
 portal.position = SCNVector3(0, 0, -1.5)
 self.sceneView.scene.rootNode.addChildNode(portal)

.ts：

<mat-calendar [minDate]="minDate" [maxDate]="maxDate" [selected]="selectedDates" (selectedChange)="selectedChange($event)" [headerComponent]="displayMonth()" [startAt]="startDate"></mat-calendar>

这在我的代码中工作正常。我希望对你有用。

谢谢阿卜杜拉

Answer 3

mat-datepicker的{{1}}输入可以做到这一点。向其传递一个接受dateClass并返回要应用的类名的函数。

来自docs的示例：

Date

请注意，在我的情况下，我必须将背景应用于<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 [dateClass]="dateClass" #picker></mat-datepicker> </mat-form-field> dateClass = (d: Date) => { const date = d.getDate(); // Highlight the 1st and 20th day of each month. return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined; } .example-custom-date-class { background: orange; border-radius: 100%; }的直接子级.mat-calendar-body-cell-content，而不是像示例中那样直接应用于类。

Angular 2材料datepicker突出特殊日子

3 个答案: