All dates are disabled when startDate and endDate is used with isInvalidDate

[teoeugene]

Versions

• Angular version: 12~
• component version: 4 and 5.

Describe the bug

Using startDate and endDate parameters together with isInvalidDate disables all dates. In the same time isCustomDate failed to insert the custom CSS class.

Expected behavior

I have this inline datepicker with the following parameters (values changed for simplicity):

<ngx-daterangepicker-material
    emptyWeekColumnClass="empty-col"
    emptyWeekRowClass="empty-row"
    [linkedCalendars]="true"
    [isInvalidDate]="isInvalidDate"
    [isCustomDate]="isCustomDate"
    [minDate]="minDate"
    [maxDate]="maxDate"
    [startDate]="selectedDates.startDate"
    [endDate]="selectedDates.endDate"
    (datesUpdated)="datesUpdated($event)">
 </ngx-daterangepicker-material>

All dates are disabled if I have isInvalidDate and isCustomDate does not insert the CSS class.

The screenshot below shows 2 datepickers - the first datepicker is not using the startDate and endDate parameters. The second datepicker is when startDate and endDate is in used.

The browser Inspector for the second datepicker shows that the CSS class "start-date" and "end-date" are applied, but "in-range" are not applied for dates in between, while all date buttons are all disabled with "disabled" and "invalid" CSS class.

The screenshot below shows what it looks like when startDate and endDate is included but without isInvalidDate. Pre-selection can work but at the loss of not being able to use the isInvalidDate parameter as well as isCustomDate.

I'd also ensured that other parameters such as emptyWeekColumnClass, emptyWeekRowClass, linkedCalendars isn't causing the issue by removing them but it has no affect on the problem.

This issue is replicable on version 4.0.1 and 5.0.2.

Edit: To add further context of what I am doing, I'm using specific dates that are only valid to be used in isInvalidDate. If the dates match, it will return false, otherwise everything else is true.

  isInvalidDate = (d: any) => {
    if (this.validDates.some(s => s.unix() == dayjs(d.$d).unix())) {
      return false;
    } else {
      return true;
    } 
  }

[teoeugene]

After doing some tests, I'd manage to further narrow down the issue to a specific scenario.

If I have a range of valid dates to use in isInvalidDate that starts on one month and ends after the 3rd day of the following month, it causes the issue.

Simplified sample of dates where it will cause this bug:

Example 1: 1 Aug, 2 Aug, 3 Aug, 11 Aug, 12 Aug, 13 Aug, 2 Sept <- NO bug 1 Aug, 2 Aug, 3 Aug, 11 Aug, 12 Aug, 13 Aug, 3 Sept <- BUG!

Example 2: 28 Aug, 29 Aug, 30 Aug, 31 Aug, 2 Sept <- NO bug 28 Aug, 29 Aug, 30 Aug, 31 Aug, 3 Sept <- BUG!

Example 3: 10 Nov, 20 Nov, 30 Nov, 2 Dec <- NO bug 10 Nov, 20 Nov, 30 Nov, 3 Dec <- BUG!

Edit: The above scenario doesn't apply as it seems completely broken when singleDatePicker is true regardless of the dates.

[loonix]

I had a problem with isInvalidDate, which does what it says but for my scenario it did not work. Instead I used isCustomDate which allows you to add a css class to the dates instead of making them invalid.

  isCustomDate = (m: dayjs.Dayjs) => {
      const isValidDate = this.invalidDates.some(d => d.isSame(m, 'day'));
      return isValidDate ? 'invalid-date' : false;
  }

Styles

  .md-drppicker td.available.invalid-date {
    text-decoration: line-through;
    pointer-events: none;
    color: darkgray;
}

What is does is, it disables the user input on the invalid dates but still makes the date range selectable. So like this you can get the start and end date.

Hope it helps someone in the future