目前我有一个mat date picker系列.逻辑是用户可以 Select 的日历上的最小日期为+2整天,但不包括周末计数

如果今天是25(2022年7月25日),那么当前日期([min]="currentDate")应该是28,即2022年7月28日星期四.

如果今天是26(2022年7月26日),那么当前日期([min]="currentDate")应该是28,即2022年7月29日星期四.

但是,如果它是星期五,它不应该包括周末的计数,例如今天是

同样的逻辑适用于每个日期.

伙计们,你们知道我们该如何利用日历吗?谢谢

#闪电战

https://stackblitz.com/edit/angular-byrmnt-setsza?file=src%2Fapp%2Fdate-range-picker-overview-example.ts,src%2Findex.html,src%2Fapp%2Fdate-range-picker-overview-example.html

#html

   <mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input
    [min]="currentDate"
    [rangePicker]="picker"
  >
    <input matStartDate matInput placeholder="Start date" />
    <input matEndDate matInput placeholder="End date" />
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

#ts代码

  export class DateRangePickerOverviewExample {
    currentDate = new Date();
  
    ngOnInit(): void { 
      this.currentDate = new Date(this.currentDate.setDate(this.currentDate.getDate() + 2));
    }
  
    // weekendsDatesFilter = (d: Date): boolean => {
    //   const day = d.getDay();
    //   /* Prevent Saturday and Sunday for select. */
    //   return day !== 0 && day !== 6;
    // };
  }

推荐答案

getMinDate(date: any) {
    return dateCompare=[1,2,3,4,5,6,7].map(x=>
             new Date(date.getTime()+(24*60*60*1000*x)))
             .filter(x=>x.getDay()!=6 && x.getDay()!=0)
             .find((x,i)=>i==1)
}

stackblitz

Update解释

代码创建了一个包含7个日期的数组(数组中的每个元素一天).

 [1,2,3,4,5,6,7].map(x=>
       new Date(date.getTime()+(24*60*60*1000*x)))

在日期数组中转换数组[1,2,3,4,5..],例如[2022-07-292022-07-302022-07-312022-08-012022-08-02…]

然后过滤并仅获取非周日或周六的日期.

             .filter(x=>x.getDay()!=6 && x.getDay()!=0)

新数组类似于[2022-07-292022-08-012022-08-02,…]

最后获取位置2的元素(在数组中,位置1是索引0,位置2是索引1…)

             .find((x,i)=>i==1)

获取2022-08-01

如果我们需要一天而不是周日或周六,我们可以将"i==1"更改为"i==2".

Javascript相关问答推荐

使用Element.children在前后移动 node

用户单击仅在JavaScript中传递一次以及其他行为

一次仅播放一个音频

RxJS setTimeout操作符等效

materialized - activeIndex返回-1

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

Cookie中未保存会话数据

如何从一个列表中创建一个2列的表?

在nextjs服务器端api调用中传递认证凭证

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

在JS中拖放:检测文件

在使用HighChats时如何避免Datatables重新初始化错误?

使用ThreeJ渲染的形状具有抖动/模糊的边缘

如何将数组用作复合函数参数?

如何使用TypeScrip设置唯一属性?

当用户点击保存按钮时,如何实现任务的更改?

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

Reaction-SWR-无更新组件

如何使用Astro优化大图像?

如何修复使用axios运行TSC index.ts时出现的错误?