datepicker - mat datepicker angular6中的周选择

Question

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

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

Answer 1

哦，我经历了很多，这是我的功能的结果
首先我们设置星期一，我有一个函数(过滤周)来设置星期一和星期日的值，对于我发送的请求，我只是为了示例而发布它。
现在在 dateclass() 中，它是一个函数，用于使日期选择器中的单元格类更改，在 html 中，在“ 现在，在此函数中，我有 2 个 if，用于验证星期一不是 30 或 31，在这种情况下，当天剩余的时间是 1、2、3 等(现在我正在考虑我需要修复此验证xD 因为如果 tusday 是 30 或 31，问题会一直存在)无论如何，如果你有一周中每一天的值，使用 time .valueOf() 函数来比较日期之间的时间值(日期值是在 if 内 if xD) 和星期几的值
如果需要帮助来应用它，请写信给我。用这个 referend question为了更好地理解我设置特殊日子颜色的方式

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

}