Ngx-bootstrap: Datepicker / Timepicker error. Typeerror Cannot read property 'getFullYear' when date assigned to null

[quiringk]

I'm not 100% sure this is a ng2-bootstrap error but I think it is.

I have a Date object bound to datepicker. The date starts off as null. Then I assign it to new Date(). Everything is good up to this point. Then when I clear the date (assign the date to null) I get the following error:

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'getFullYear' of null
TypeError: Cannot read property 'getFullYear' of null
    at DatePickerInnerComponent.eval [as compareHandlerDay] (http://localhost:3000/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js:8163:36)
    at DatePickerInnerComponent.compare (http://localhost:3000/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js:4519:25)
    at DatePickerComponent.writeValue (http://localhost:3000/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js:7946:30)
    at eval (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:1188:31)
    at eval (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:2217:69)
    at Array.forEach (native)
    at FormControl.setValue (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:2217:32)
    at eval (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:3339:64)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
    at Object.onInvoke (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5976:41)

Here is my datepicker: (date1 is the object)

<datepicker [(ngModel)]="date1" (ngModelChange)="dateChanged()" [showWeeks]="false"></datepicker>

[valorkin]

It could be

[philjones88]

Think I just hit this issue too:

Error: Uncaught (in promise): TypeError: date1.getFullYear is not a function
TypeError: date1.getFullYear is not a function
    at DatePickerInnerComponent.compareHandlerDay (http://localhost:1924/static/ng2/js/main.bundle.js:26327:37)
    at DatePickerInnerComponent.compare (http://localhost:1924/static/ng2/js/main.bundle.js:1602:25)
    at DatePickerComponent.writeValue (http://localhost:1924/static/ng2/js/main.bundle.js:26186:30)
    at http://localhost:1924/static/ng2/js/vendor.bundle.js:32344:27
    at http://localhost:1924/static/ng2/js/vendor.bundle.js:52167:65
    at Array.forEach (native)
    at FormControl.setValue (http://localhost:1924/static/ng2/js/vendor.bundle.js:52167:28)
    at http://localhost:1924/static/ng2/js/vendor.bundle.js:23164:58
    at ZoneDelegate.invoke (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7242:26)
    at Object.onInvoke (http://localhost:1924/static/ng2/js/vendor.bundle.js:27600:37)
    at ZoneDelegate.invoke (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7241:32)
    at Zone.run (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7113:43)
    at http://localhost:1924/static/ng2/js/polyfills.bundle.js:7520:57
    at ZoneDelegate.invokeTask (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7275:35)
    at Object.onInvokeTask (http://localhost:1924/static/ng2/js/vendor.bundle.js:27591:37)
    at ZoneDelegate.invokeTask (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7274:40)
    at Zone.runTask (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7151:47)
    at drainMicroTaskQueue (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7418:35)
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7349:25)
    at resolvePromise (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7486:31) [angular]
    at http://localhost:1924/static/ng2/js/polyfills.bundle.js:7523:17 [angular]
    at Object.onInvokeTask (http://localhost:1924/static/ng2/js/vendor.bundle.js:27591:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7274:40) [angular]
    at Zone.runTask (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7151:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7418:35) [<root>]
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:1924/static/ng2/js/polyfills.bundle.js:7349:25) [<root>]

[smnbbrv]

This happens to me when minDate or maxDate is specified but the model is undefined / null / whatever. Simple removing minDate and maxDate solved the problem

[renehamburger]

DatePickerComponent::writeValue or DatePickerInnerComponent::compare need to handle null dates. This issue also occurs if the date is changed by outside code, e.g. when an input is associated with the Datepicker.

[Klinton90]

Facing same issue. Assign value = void 0; as temporary fix :

[jignesh-tps]

@Klinton90 , Can you tell me what exactly you do to resolve this error ? Where to assign this value = void 0 ?

[Klinton90]

It depends on how/when you assign null to your variable. But general approach could be (just in case, I use same trick with timepicker):

@Component({
    template: `
<datepicker [(ngModel)]="dateValue"></datepicker>
<hr/>
<button type="button" (ngClick)="onClearButtonClick()">Clear</button>
<button type="button" (ngClick)="onTodayButtonClick()">Today</button>
`
    ....
})
export class UtilizeNgxBootstrapDatepickerComponent{

    private _dateValue: Date;

    public get dateValue(): Date{
        return this._dateValue();
    }

    public set dateValue(value: Date): Date{
        if(value !== this._dateValue){
            this._dateValue = value ? value : void 0;
        }
    }

    constructor(){}

    public onClearButtonClick(){
        this.dateValue = null; //or this._dateValue = void 0;
    }

    public onTodayButtonClick(){
        this.dateValue = new Date();
    }

}

[jppellerin]

I had the same issue with this one. Looking into it a bit, it seems it has been identified in code, but never fixed in src/datepicker/datepicker.component.ts:

And the culprit piece of code in src/datepicker/datepicer-inner.component.ts is :

public compare(date1: Date, date2: Date): number | undefined {
    if (date1 === undefined || date2 === undefined) {
      return undefined;
    }

    if (this.datepickerMode === 'day' && this.compareHandlerDay) {
      return this.compareHandlerDay(date1, date2);
    }

    if (this.datepickerMode === 'month' && this.compareHandlerMonth) {
      return this.compareHandlerMonth(date1, date2);
    }

    if (this.datepickerMode === 'year' && this.compareHandlerYear) {
      return this.compareHandlerYear(date1, date2);
    }

    return void 0;
  }

As you can see, dates are checked to be undefined, but never null.

Then (in the daypicker case - mine) you compare 2 dates, where any one of these dates is acceptably null.

this.datePicker.setCompareHandler(function (date1: Date, date2: Date): number {
      let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
      let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
      return d1.getTime() - d2.getTime();
    }, 'day');

This is where the error originate. Trying to getFullYear() of a null object.

Setting date to void 0, I can confirm works as well. What I ended up doing is setting the date to undefined. This is explicitly checked in code and hence does the same "job" as setting to null. Not a final solution, but definitely a workaround.

Hope this helps people in the meantime.

[juanpablodelatorre]

Someone should take a look at this.

[valorkin]

fixed in
new datepicker (new style and pop up version)
available in v1.9.0+
check this out: http://valor-software.com/ngx-bootstrap/#/datepicker#examples

[Klinton90]

Thank you.
Year/Month buttons doesn't work on demo page...

[valorkin]

it is in the list of next features to go

[Keksdroid]

I'm experiencing a similiar issue.
My "from" date hat the "maxDate" set to "to" date.
My "to" date has the "minDate" set to "from" date.

When "from" is null and "to" isnt, I'm getting "date.getTime is not a function" error and datepicker doesnt open.
v2.0.2

[yashwp]

I'm having the same issue when using minDate and maxDate...
BsDatepickerContainerComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: date.getTime is not a function

[juanpablodelatorre]

I solved it writing my own DateAdapter and overriding the parse function:

  parse(value) {
      if (typeof value === 'number') {
          return new Date(value)
      } else if (typeof value === 'string') {
        // Assume dd/mm/yyyy date format
        return new Date(
          value.replace(/(\d\d)\/(\d\d)\/(\d{4})/, (full, d, m, y) => `${y}-${m}-${d}T12:00:00.000z`)
        )
      }
      return value ? new Date(Date.parse(value)) : null
  }

[worldspawn]

I had the same issue and it was caused me throwing a naive value at maxdate. It was getting 15/04/2019 12:00AM which isn't a "valid" date. I used 8601 date and it worked.