如何在有角度的材料日期选择器中隐藏周末日期

Question

是否可以在mat-datepicker中隐藏周六/周日的日期。 或者，也可以重新排列它们，使其从星期一开始

感谢任何帮助/建议。

Answer 1

好吧，您无法隐藏它们。但是，您可以将其禁用，以防止用户选择任何周末日期。

您需要使用matDatepickerFilter选项来完成此操作。

在您的datepicker-filter.html

中

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在datepicker-filter.ts中，您的myFilter定义为

@Component({
  selector: 'datepicker-filter',
  templateUrl: 'datepicker-filter.html',
  styleUrls: ['datepicker-filter.css'],
})
export class DatepickerFilter {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

希望这会有所帮助！

Answer 2

 <input matInput [matDatepicker]="lastdatepicker" 
   [matDatepickerFilter]="weekendsDatesFilter" [min]="minlastDateOfProposedTrading" 
  [max]="lastDateOfProposedTradingDate" placeholder="DD/MM/YYYY" 
  formControlName="lastDateOfProposedTrading" required/>
           
weekendsDatesFilter = (d: any):boolean => {
const day = d.getDay();
return day !== 0 && day !== 6 ;    
}