mat datepicker angular6中的周选择

Question

我想将功能添加到材料日期选择器以便能够选择周..所以当我从一行中选择一个日期时，我希望它输出从一周开始到一周结束的日期范围。

我之前在常规 jquery 日历上这样做过--检查照片，但我想知道在 mat-datepicker 中是否可行

Answer 1

哦，我经历了很多，这是我的功能的结果，我们首先设置星期一，我有一个函数（过滤周）设置星期一和星期日的值，对于ai发送的请求，我发布它只是为了这个例子。

现在在 dateclass() 中，它是一个使日期选择器中单元格的类发生变化的函数，在 html 中，在“<mat-datepicker”上使用 [dateClass]="dateClass()" 进行调用

现在，在这个函数中我有 2 个 if，它用于验证星期一不是 30 或 31，在这种情况下，当天的其余时间是 1,2,3 等（现在我正在考虑它，我需要修复此验证xD 因为如果星期二是 30 或 31，问题将持续存在）无论如何，当你有一周中每一天的值时，使用 time .valueOf() 函数来比较日期之间的时间值（日期值是在 if 内 xD) 和星期几的值

如果需要帮助来应用它，请写信给我。使用这个参考问题可以更好地理解我设置特殊日子颜色的方式

filterWeek(){
 let d = this.selectedW
 let day = d.getDay();
 let diffm = d.getDate()-day +1;
 let diffs = d.getDate()-day +7;
 let mon = new Date(d.setDate(diffm));
 let sun = new Date(d.setDate(diffs));

  if(mon.getDate() > sun.getDate()){
   this.monday=mon.getFullYear()+'-'+(mon.getMonth()+1)+'-'+mon.getDate();
   this.sunday =sun.getFullYear()+'-'+(sun.getMonth()+2)+'-'+sun.getDate();
  }else{
   this.monday=mon.getFullYear()+'-'+(mon.getMonth()+1)+'-'+mon.getDate();
   this.sunday =sun.getFullYear()+'-'+(sun.getMonth()+1)+'-'+sun.getDate();
  }
  
 }

dateClass() {
let l:any =new Date(this.monday);
var day = new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 0);
if(l.getDate() === day.getDate()){
  let m:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 1);
  let x:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 2);
  let j:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 3);
  let v:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 4);
  let s:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 5);
  let d:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 6);
  return (date: Date): MatCalendarCellCssClasses => {
  
    if (date.valueOf() === l.valueOf() || date.valueOf() === m.valueOf() || date.valueOf() === x.valueOf()
     ||date.valueOf() === j.valueOf() || date.valueOf() === v.valueOf() || date.valueOf() === s.valueOf() 
     || date.valueOf() === d.valueOf()) {
      return 'special-date';
    } else {
      return;
    }
  };
}else{
  let m:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, new Date(this.monday).getDate()+1);
  let x:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+2);
  let j:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+3);
  let v:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+4);
  let s:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+5);
  let d:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+6);
return (date: Date): MatCalendarCellCssClasses => {
  if (date.valueOf() === l.valueOf() || date.valueOf() === m.valueOf() || date.valueOf() === x.valueOf()
  ||date.valueOf() === j.valueOf() || date.valueOf() === v.valueOf() || date.valueOf() === s.valueOf() 
  || date.valueOf() === d.valueOf()) {
    return 'special-date';
  } else {
    return;
  }
};
}

}