角度日期范围选择器 - 如何在已经使用 min 属性将最小日期设置为今天时禁用同一天

Posted 2023-05-07

【中文标题】角度日期范围选择器 - 如何在已经使用 min 属性将最小日期设置为今天时禁用同一天

【英文标题】：Angular date range picker - how to disable the same day when already using the min property to set the minimum date to today

【发布时间】：2022-01-03 20:16:59

【问题描述】：

当使用 Angular Material mat-date-range-picker 时，我不希望用户能够选择同一日期的日期范围。如在日期范围内至少应为 1 天。

2021/11/25 - 2021/11/26 有效

2021/11/25 - 2021/11/25 无效

编辑：忘了提到我已经在使用 min 属性将最短日期设置为今天

【问题讨论】：

谢谢。如果还有一种方法可以使用范围选择器来做到这一点，那就太酷了

【参考方案1】：

尝试使用以下方式设置最短日期：

<mat-form-field appearance="fill" >
   <mat-date-range-input [rangePicker]="picker" [min]="minDate" 
   [max]="maxDate" >
   <input matStartDate placeholder="Start date"    >
   <input matEndDate 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>

打字稿：

export class DatepickerMinMaxExample 
  minDate: Date;
  maxDate: Date;

  constructor() 
    const currentYear = new Date();
    var day = 60 * 60 * 24 * 1000;
    this.minDate = new Date(currentYear.getTime() + day);
    console.log(this.minDate.toDateString());
    //this.maxDate = new Date(currentYear + 1, 11, 31);
  

【讨论】：

对不起，我忘了说我已经在使用 min 属性将最短日期设置为今天