Error selecting start date - Cannot read property 'endOf' of null

[dsism]

Versions

• Angular version: 9
• component version: 4.0.1

When selecting the start date, the following errors appear on the console:

The error keeps happening repeatedly while I move the mouse over the calendar until I choose an end date, making it very slow.

My .html:

      <input class="form-control" type="text" name="daterangeInput" ngxDaterangepickerMd [(ngModel)]="modelValue"
        [showCustomRangeLabel]="true" [alwaysShowCalendars]="true" [ranges]="ranges" [linkedCalendars]="true"
        (datesUpdated)="onChange($event)" [showCancel]="true" [maxDate]='options.maxDate' autocomplete="off"
        [autoApply]="options.autoApply" [locale]="locale" />

to test, I also removed some properties to confirm that there was no other item interfering. But the problem persisted...

My .ts:

tried with modelValue: any; modelValue = { 'startDate': null, 'endDate': null }; modelValue = { 'startDate': moment(), 'endDate': moment() }; etc... even with the last example, setting the endDate, it didn't work. Tried also setting startKey and endKey but it doesn't seem to be related.

This is the line that seems to have an issue: https://github.com/fetrarij/ngx-daterangepicker-material/blame/master/src/daterangepicker/daterangepicker.component.ts#L242

Any help would be appreciated :)

Edit: The issue was happening after setting the locale and range values inside a method called from ngAfterViewInit(). Since I needed the label values to be dynamic.

[misha130]

Same for me. Doing exactly the same thing with the locale

[Fusionshh]

Same problem. Still no decision?

[Fusionshh]

because there is still no solution. The solution for me was to fork the project and add the following condition to the method

@Input() set ranges(value) {
        this._ranges = value;
        if(this.startDate && this.endDate) {
          this.renderRanges();
        }
    }

I understand that the solution is not complex, but for lack of a better one ...

[starram]

This error comes only because of wrong format of custom locale.
Try passing it following Way: [locale]="{ applyLabel: 'ok', format: 'D-M-YY', daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], }"

[SalvatoreDiPalo]

Yeah, the problem mainly concerns the locale and the format.

I'm using 3 languages (es, en, it) and the format 'DD/MM/YYYY' The error occurs only with the en language as everything works perfectly without the others