date.getHours is not a function / date.setHours is not a function

[MatthewLHolden]

Hi,

I have followed the steps from this site: https://github.com/h2qutc/angular-material-components (live demo and documentation)

1. Installed npm install --save @angular-material-components/datetime-picker

2. Added required modules

import {
           NgxMatDatetimePickerModule, 
           NgxMatNativeDateModule, 
           NgxMatTimepickerModule 
  } from '@angular-material-components/datetime-picker';
  
@NgModule({
  imports: [
    ...
    NgxMatDatetimePickerModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule,
    ...
  ]
})
export class AppModule { }

3. Added the HTML

<ngx-mat-timepicker 
              [(ngModel)]="date" [disabled]="disabled" 
              [showSpinners]="showSpinners"
              [stepHour]="stepHour" [stepMinute]="stepMinute" 
              [stepSecond]="stepSecond" 
              [showSeconds]="showSeconds">
  </ngx-mat-timepicker>

Now when my component loads, the console reads:

TypeError: date.getHours is not a function

When trying to click the hour or minutes via the chevrons in the UI, the console fires this error:

TypeError: date.setHours is not a function

This error is also apparent on the demo in the link at the start of this post, which is the demo provided by the documentation for this package. Are there any steps to resolving this please?

[h2qutc]

@MatthewLHolden Could you specify the version of Angular in your project and the version datetimepicker that you installed plz?

[MatthewLHolden]

Apologies, that would have been useful!

  "dependencies": {
    "@angular-material-components/datetime-picker": "^7.0.1",
    "@angular/animations": "~13.1.0",
    "@angular/cdk": "^13.1.1",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.1.0",
    "@angular/material": "^13.1.1",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "ngx-mat-timepicker": "^13.0.0",
    "rxfire": "^6.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }

[h2qutc]

@MatthewLHolden Can you provide some codes onhttps://stackblitz.com/ so that I can help ? I see that you use the other npm package called ngx-mat-timepicker that exports same component selector. Maybe there is a conflict between two packages.

[MatthewLHolden]

Hey! - I've uninstalled that. It was initially installed as an attempt to get something else working (as I couldn't get this to work) I'll try and set up a stack blitz now, but I've literally followed the documentation in the [demo](https://h2qutc.github.io/angular-material-components/timepicker). The code I posted above is what I've posted into my own components. I haven't connected it to a form or anything yet as the console is firing the errors.

If it helps, the demo provided by this package (in the link) also appears to have the same issue in the console.

[Shan7anu]

I was also facing the similar issue TypeError: t.setHours is not a function. Turn out (opened)="openedDate()" was causing the issue. After removing it the error went away. Hope this helps. Template: <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds" [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime" (opened)="openedDate()"> <ng-template> <span>OK</span> </ng-template> </ngx-mat-datetime-picker>

In component.ts openedDate() { this.picker.select(this.minDate); }

[MatthewLHolden]

Hey @Shan7anu - Thanks for the response. In this instance, I'm not using the date time picker. I'm just using the time picker. I copied the code from the documentation (removing disabled and ngModel) and the error occurs.

  <ngx-mat-timepicker
  [showSpinners]="showSpinners"
  [stepHour]="stepHour" [stepMinute]="stepMinute"
  [stepSecond]="stepSecond"
  [showSeconds]="showSeconds">
</ngx-mat-timepicker>

As mentioned earlier, the demo that the documentation provides also has the same issue, so I'm wondering if that's a good clue as to what could be causing this. I've simply installed it, added the imports to my module, copied the HTML and added the appropriate booleans to my component.ts (things such as showSpinners etc).

I've just attempted an even more basic version:

<form [formGroup]="testForm">
  <ngx-mat-timepicker formControlName="time"></ngx-mat-timepicker>
</form>

A little progress. The time picker doesn't throw any errors in its natural form. If there's a timestamp value in the database for the form control name of time, then the error occurs again. I'm using Firestore which is a timestamp value. How would I get that to work in this instance to prevent the error?

[MatthewLHolden]

Ok, so I've managed to get a version working:

HTML

<form [formGroup]="testForm">
  <ngx-mat-timepicker formControlName="question_time"></ngx-mat-timepicker>
</form>

Component

if (form.question_time) {
  form.question_time = (form.question_time as firebase.default.firestore.Timestamp)?.toDate();
}

Question: Is there a way to have the time picker not set a time on load? I'd like it to have an empty state until the user enters something.

[MatthewLHolden]

Hi team, is there any update on the last question at all? Cheers!

Question: Is there a way to have the time picker not set a time on load? I'd like it to have an empty state until the user enters something.