CODEWITHSUNDEEP
angularangular-material
Miguelit0
Miguelit0

Reputation: 115

Datepicker doesn't disable all unavailable dates

EDIT : I found part of the problem, in my filter, if I print console.log (day), when I arrive in December the dates equivalent to 01/00/2019, 02/00/2019 ... because .get ('month') starts at index 0, I do not know how to fix it though

When I retrieve the unavailable dates of my server (a large table with more than 20 dates) I manage to disable a first date range but not all dates.

This is the response of my server example: 

{
"arrayOfUnavailableDates": [
    "2018-12-01",
    "2018-12-02",
    "2018-12-03",
    "2018-12-04",
    "2018-12-05",
    "2018-12-06",
    "2018-12-07",
    "2018-12-08",
    "2018-12-09",
    "2018-12-10",
    "2018-12-11",
    "2018-12-12",
    "2018-12-13",
    "2018-12-14",
    "2018-12-15",
    "2018-12-16",
    "2018-10-05",
    "2018-10-06",
    "2018-10-07",
    "2018-10-08",
    "2018-10-09",
    "2018-10-10"
    ]
}

I get this array in angular with

getUnavailableDatesOfCoach(coachId: number): Observable<Date[]> {
const queryParams = `?coachId=${coachId}`;

return this._http
  .get<{ arrayOfUnavailableDates: Date[] }>(
    `${this.apiUrlUnavailableDate}` + queryParams
  )
  .pipe(map(data => data.arrayOfUnavailableDates));
}

This is my filter method:

myFilter = (d: Date): boolean => {
this._route.queryParams.subscribe(params => {
  if (params['coachId']) {
    this._unavailableDateService
      .getUnavailableDatesOfCoach(params['coachId'])
      .subscribe(arrayOfUnavailableDates => {
        this.disableDateList = arrayOfUnavailableDates;
        console.log(this.disableDateList);
      });
  }
});
const dateMoment = moment(d);

let date: any;
let month: any;
// console.log(dateMoment.get('date'));
if (dateMoment.get('date').toString().length < 2) {
  date = '0' + dateMoment.get('date').toString();
} else {
  date = dateMoment.get('date').toString();
}

if (
  dateMoment
    .add(1, 'M')
    .get('month')
    .toString().length < 2
) {
  month =
    '0' +
    dateMoment
      .get('month')
      .toString()
      .toString();
} else {
  month = dateMoment
    .get('month')
    .toString()
    .toString();
}

const day = dateMoment.get('year').toString() + '-' + month + '-' + date;
// console.log(day);
return !this.disableDateList.includes(day);
// tslint:disable-next-line:semicolon
};

the datepicker deactivates the dates from 5 to 10 October but not the dates of December ...

enter image description here

Thank you !

Upvotes: 0

Views: 125

Answers (1)

Akj
Akj

Reputation: 7231

Try like this:

disable dates using filter 

 disableDateList: Array<any> = [
    '2018-08-01',
    '2018-08-02',
    '2018-08-03',
    '2018-08-04',
    '2018-08-05',
    '2018-08-06',
    '2018-08-15',
    '2018-08-15',
    '2018-10-15',
    '2018-11-15',
    '2018-12-15',
    '2019-02-15',
    '2019-11-05',
    '2019-12-15'
  ];

  myFilter = (d: Date): boolean => {
    d = new Date(d);

    let date: any;
    let month: any;

    if (d.getDate().toString().length < 2) {
      date = '0' + d.getDate().toString()
    } else {
      date = d.getDate().toString()
    }

    if ((d.getMonth() + 1).toString().length < 2) {
      month = '0' + (d.getMonth() + 1).toString()
    } else {
      month = (d.getMonth() + 1).toString()
    }

    const day = d.getFullYear().toString() + "-" + month + "-" + date;

    return !this.disableDateList.includes(day);
  }

Upvotes: 1

Related Questions