从Angular中的材质datepicker设置特定日期的样式

Question

我希望在datepicker对象中设置特定日期的样式，但我似乎无法从日历中访问DOM元素。我尝试使用视图子项，但这只能让我访问选择器元素，而不是单击选择器时创建的日历。

我还尝试将一个面板类添加到日期选择器并尝试选择它，但它似乎也没有用。 https://stackblitz.com/edit/angular-zjt5wz-ehdbdt?file=app/datepicker-start-view-example.ts

理想情况下，我希望每天都能应用符合特定条件的课程。例如，将所选日期之前的所有日期的样式设置为黄色。我怎么能这样做呢？

Answer 1

那是因为当$('#clock').datebox({ mode: "durationflipbox", overrideDurationOrder: ["h","i"] }); 事件触发时，视图还不包含日历的DOM元素。

您可以将代码包装在opened中作为解决方法

setTimeout

Modified stackblitz

修改

根据您的评论，材料datepicker API没有用于收听显示日期范围更改的事件。作为黑客，您可以尝试手动收听下一个/上一个按钮点击，如此

streamOpened(event) {
   setTimeout(()=>{
   let elements = document.querySelectorAll('.endDate');
   //here elements will not be empty
   });

修改2

在您的第二条评论之后，这是一个将刷新与所有日历按钮点击绑定的示例。这应该足以让你前进。您可能需要为其他日历事件添加更多侦听器

updated demo

基本上，您可以尝试收听所有点击事件

constructor(private   renderer:Renderer2){}
//...
let nextBtn = document.querySelectorAll('.mat-calendar-next-button')[0];
this.renderer.listen(nextBtn, 'click', ()=>
{
  console.log('click on next')
  //Re-run logic here (probably in timeout again...)
})

Answer 2

您正在寻找@Input() dateClass: (date: D) => MatCalendarCellCssClasses的{​​{1}}属性。您提供了一个接受日期参数并返回css类的函数。使用该函数可以确定哪些日期应具有css类。

每次用户更改显示（即移动到另一个月）时，都会针对显示中的每个日期调用该功能。

最后，您可能需要将css类包含在全局文件中，而不是包含在与组件关联的css文件中（有关更多信息，请研究“查看封装”）。