从Angular中的材料datepicker风格化特定的日子 [英] Stylizing specific days from the material datepicker in Angular

问题描述

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

Im looking to style specific days in the datepicker object but I cant seem to get access to the DOM elements from the calendar. I tried using a view child, but that only gave me access to the picker element, not the calendar that gets created when click on the picker.

我也曾尝试将面板类添加到日期选择器并尝试在其上进行选择，但它似乎也不起作用. https://stackblitz.com/编辑/angular-zjt5wz-ehdbdt?file=app/datepicker-start-view-example.ts

I have also tried adding a panel class to the date picker and trying to select on that, but it also doesnt seem to work. https://stackblitz.com/edit/angular-zjt5wz-ehdbdt?file=app/datepicker-start-view-example.ts

理想情况下，我想在符合特定条件的每一天上一堂课.例如，将所选日期之前的所有日期设置为黄色.我该怎么做呢?

Ideally, I want to apply a class to every day that meets a specific criteria. For example, style all days prior to the selected day as yellow. How can I go about doing this?

推荐答案

这是因为在触发opened事件时，该视图尚未包含日历的DOM元素.

That's because when the opened event fires, the view does not contain the DOM elements for the calendar yet.

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

You can wrap your code in a setTimeout as a workaround

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

修改后的stackblitz

修改

在您发表评论之后，重要的datepicker API没有事件可监听显示的日期范围的更改.作为hack，您可以尝试像这样手动听下一个/上一个按钮的点击

Following your comment, the material datepicker API has no event for listening to changes to displayed date range. As a hack, you could try manually listening to next/previous button click like this

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

在您的第二条评论之后，这是一个将刷新绑定到所有日历按钮单击的示例.那应该足以使您前进.不过，您可能需要向其他日历事件添加更多的侦听器

Following your 2nd comment, here is an example that binds refresh to all calendar button clicks. That should be enough to get you going. You'll probably need to add more listener to other calendar events though

更新了演示

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

Basically, you can try listening to all click events

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');
      } 
    });

这篇关于从Angular中的材料datepicker风格化特定的日子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！