在Angular中从材质日期选择器设置特定日期的样式

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

我也尝试过在日期选择器中添加一个panel类，并尝试进行选择，但它似乎也不起作用

---

理想情况下，我想在每一天都应用一个符合特定标准的课程。例如，将选定日期之前的所有日期设置为黄色。我该怎么做呢？

这是因为当

打开的事件触发时，视图还不包含日历的DOM元素

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

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


编辑

在您的评论之后，material datepicker API没有用于侦听显示日期范围更改的事件。作为黑客，您可以尝试手动收听下一个/上一个按钮，如下所示

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...)
})

编辑2

在您的第二条评论之后，下面是一个将刷新绑定到所有日历按钮单击的示例。这应该足够让你走了。不过，您可能需要向其他日历事件添加更多侦听器


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

let x =  elements[0].querySelectorAll('.mat-calendar-body-cell');
    x.forEach(y => {

      let c = new Date(y.getAttribute("aria-label"));
      if(c < this.startDate)
      {
        y.classList.add('newClass');
      } 
    });

let x=elements[0]。querySelectorAll（“.mat日历体单元格”）；
x、 forEach（y=>{
设c=新日期（y.getAttribute（“aria标签”）；
如果（c<此起始日期）
{
y、 classList.add（'newClass'）；
} 
});
这是因为当
打开事件触发时，视图还不包含日历的DOM元素

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

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


编辑

在您的评论之后，material datepicker API没有用于侦听显示日期范围更改的事件。作为黑客，您可以尝试手动收听下一个/上一个按钮，如下所示

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...)
})

编辑2

在您的第二条评论之后，下面是一个将刷新绑定到所有日历按钮单击的示例。这应该足够让你走了。不过，您可能需要向其他日历事件添加更多侦听器


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

let x =  elements[0].querySelectorAll('.mat-calendar-body-cell');
    x.forEach(y => {

      let c = new Date(y.getAttribute("aria-label"));
      if(c < this.startDate)
      {
        y.classList.add('newClass');
      } 
    });

let x=elements[0]。querySelectorAll（“.mat日历体单元格”）；
x、 forEach（y=>{
设c=新日期（y.getAttribute（“aria标签”）；
如果（c<此起始日期）
{
y、 classList.add（'newClass'）；
} 
});
您正在查找
mat datepicker
的
@Input（）dateClass:（date:D）=>matcalendarcsclasses
属性。您提供了一个接受日期参数并返回css类的函数。使用该函数决定哪些日期应该具有css类

每次用户更改显示，即移动到另一个月时，都会为显示中的每个日期调用该函数

最后，您可能需要将css类包含在全局文件中，而不是与组件关联的css文件中（更多信息，请研究“视图封装”）
您正在查找
mat-datepicker的
@Input（）dateClass:（date:D）=>matcalendarccellcasses
属性。您提供了一个接受日期参数并返回css类的函数。使用该函数决定哪些日期应该具有css类

每次用户更改显示，即移动到另一个月时，都会为显示中的每个日期调用该函数

最后，您可能需要将css类包含在一个全局文件中，而不是包含在与您的组件相关联的css文件中（更多信息，请研究“视图封装”）
您是否知道在更改月份时是否有方法重新运行代码？现在它只在第一个月起作用，但对我来说不起作用，这有点正常。。。在您的示例中，只有在单击“下一步”更改月份时才刷新日历样式。但是您的代码会更改今天日期之前日期的样式。。。当然，如果你点击下一步，那就永远不会是真的。。。您还需要绑定上一个。我更新了我的答案。嗯。这样，当您更改为月视图和年视图时，它仍然有效。谢谢你的帮助。你知道当他们改变月份时是否有办法重新运行代码吗？现在它只在第一个月起作用，但对我来说不起作用，这有点正常。。。在您的示例中，只有在单击“下一步”更改月份时才刷新日历样式。但是您的代码会更改今天日期之前日期的样式。。。当然，如果你点击下一步，那就永远不会是真的。。。您还需要绑定上一个。我更新了我的答案。嗯。这样，当您更改为月视图和年视图时，它仍然有效。谢谢你的帮助。