Week selection in mat datepicker angular6

Question

I want to add the functionality to Material Date picker to be able to select Weeks.. So when I select one date from a row,, I want it to output a date range from the beginning of the week to the end of the week.

I did that before, on a regular jquery calendar - -check the photo,, but I wonder if that is possible in mat-datepicker

Were you able to find a solution to this? – Sarthak Sawhney May 25 '20 at 14:42 — Sarthak Sawhney, May 25 '20 at 14:42

score 0 · Answer 1 · answered Sep 05 '20 at 22:58

OOOk i was experimienting a lot, and this its the result of my fuction firts we set the monday, i have a function (filter week) that set the value of monday and sunday, for a request that a i send, i post it just for the example.

now in dateclass(), its a function for make the classes of the cells in the date picker change, in the html, on the "<mat-datepicker" use [dateClass]="dateClass()" for calling

now, inside this function i have 2 if, its for validate that the monday its not 30 or 31, in that case the rest of the day are 1,2,3,etc (now im thinking about it i need to fix this validation xD because if tusday are 30 or 31, the problem will persis) anyway, wehn u have the value of avery day of the week, use the function of time .valueOf() to compare de value of time between date (the date value are inside the if inside the if xD) and the value of the day of the week

write me if need help for applicate it. use this referend question for understanding better the way that i set the color of the special days

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

}

score 0 · Answer 2 · answered Mar 21 '22 at 15:18

If like me you're using Moment for the date provider you could use this :

import { Injectable } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import {
  DateRange, MatDateRangeSelectionStrategy
} from '@angular/material/datepicker';
import { Moment } from 'moment';

@Injectable()
export class WeekRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D>
{
  constructor(private _dateAdapter: DateAdapter<D>) { }

  selectionFinished(date: D | null): DateRange<D> {
    return this._createFiveDayRange(date);
  }

  createPreview(activeDate: D | null): DateRange<D> {
    return this._createFiveDayRange(activeDate);
  }

  private _createFiveDayRange(date: D | null): DateRange<D> {

    let currentDate: Moment | Date;

    if (date) {
      currentDate = (date as unknown as Moment);
      currentDate = currentDate.startOf('week');

      const start = this._dateAdapter.addCalendarDays(currentDate as unknown as D, 0);
      const end = this._dateAdapter.addCalendarDays(currentDate as unknown as D, 6);
      return new DateRange<D>(start, end);
    }

    return new DateRange<D>(null, null);
  }
}

In the component :

 providers:[ {
    provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
    useClass: WeekRangeSelectionStrategy,
  }]

Nota : This works for all locales

Week selection in mat datepicker angular6

2 Answers2