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

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>

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 9
Comments: 16 (4 by maintainers)

Most upvoted comments

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>]

philjones88 on Jan 4, 2017

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

valorkin on Aug 22, 2017

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.

jppellerin on May 9, 2017

It could be

valorkin on Dec 21, 2016

Someone should take a look at this.

juanpablodelatorre on Aug 16, 2017

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

jignesh-tps on Apr 26, 2017

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

smnbbrv on Jan 18, 2017

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

Keksdroid on Feb 21, 2018

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

Klinton90 on Mar 22, 2017