1

is it possible to hide the dates saturday/sunday in mat-datepicker. Or an alternative is rearrange them so it starts with monday

mat date picker

any help/suggestions are appreciated.

Tom Edwards
  • 124
  • 1
  • 13

3 Answers3

2

Well, You can't hide them. However you can make them disabled so that the user can be prevented from selecting any of the weekend dates.

You need to use the matDatepickerFilter option to get this done.

In your 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>

In your datepicker-filter.ts have your myFilter defined as, 

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

Hope this helps!

David R
  • 14,711
  • 7
  • 54
  • 72
  • ah ok, i stumbled across an answer similar to this earlier , if there is truly no way to hide the weekends then this is most likely the best solution. – Tom Edwards Jul 16 '19 at 14:42
  • Thank you David ! If you use Moment, you'll get a Moment Object rather than a Date one. You'll need to replace .getDay() by .isoWeekday(). The index for saturday and sunday are 6 and 7. – Benoît Plâtre Dec 09 '19 at 16:25
  • @BenoîtPlâtre Ah. I didn't know that mate. Thanks for the enlightment! :-) – David R Dec 09 '19 at 17:40
  • very nice and helpful! – Dario Jun 01 '21 at 08:22
2

Yes, yes it is!

To let it start on Monday (or any other day) I'll refer you to this: MatDatePicker start week on monday

But the real question is: how to hide them?

Simply put: add a custom class to specific dates.

In your component file:

@ViewChild("calendar", { static: false }) calendar: MatCalendar<Date>;

hideWeekends() {
    return (date: Date): MatCalendarCellCssClasses => {
        return this.calendar?.currentView === "month" && (date.getDay() === 0 || date.getDay() === 6) ? 'weekend' : '';
    };
}

This function will be called on every date in the current view. In previous versions it appears this didn't run for the multi-year and year view, but in the current version it does, so you need to put a check to only do it for the month view. Otherwise years and months starting on Saturday/Sunday will be hidden as well in those other views. Other than that: it's just "apply the class to the 0th (Sunday) and 6th (Saturday) day of the week".

In your html:

<mat-calendar #calendar [dateClass]="hideWeekends()"></mat-calendar>

In your css:

.mat-calendar-table-header th:not(.mat-calendar-table-header-divider):first-child,
.mat-calendar-table-header th:not(.mat-calendar-table-header-divider):last-child,
.mat-calendar-body-cell.weekend {
    display: none;
}

Hide the first and last column of the header (but not if it has the divider class), and all the cells that have the custom class.

If you did make a custom DateAdapter and the weekend is the last two columns you could alternatively do this for the header:

.mat-calendar-table-header th:not(.mat-calendar-table-header-divider):nth-last-child(-n+2)

Here's a full Stackblitz (the css doesn't get applied, but you can inspect the cells and see that the class is indeed applied, so it will work in your project): https://stackblitz.com/edit/angular-material-v12-rc-view-engine-14dwqp?file=src%2Fapp%2Fmatcalendar.ts

Example of mine

Sven Cazier
  • 397
  • 4
  • 12
0
 <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 ;    
}
Charlie
  • 69
  • 7