search

danielmoncada / date-time-picker

Angular Date Time Picker (Responsive Design)
https://daniel-projects.firebaseapp.com/owlng/date-time-picker
MIT License
137 stars 59 forks source link

ERROR TypeError: Cannot read properties of null (reading 'clampDate') #197

Open Kartax opened 2 months ago

Kartax commented 2 months ago

I cannot get the very basic input to work in my Angular 17 Application.

template:

<mat-form-field appearance="outline"> <mat-label>Gültig ab</mat-label> <input matInput formControlName="validfrom" [owlDateTime]="validfromDt" [owlDateTimeTrigger]="validfromDt"> <owl-date-time #validfromDt></owl-date-time> </mat-form-field>

and i have OwlDateTimeModule, OwlNativeDateTimeModule in my imports.

When i view my form everything looks fine, but when i click into the datetime-input it "tries" to render the calender, but fails with following error:

core.mjs:6531 ERROR TypeError: Cannot read properties of null (reading 'clampDate') at set pickerMoment (danielmoncada-angular-datetime-picker.mjs:3670:53) at _OwlDateTimeContainerComponent.initPicker (danielmoncada-angular-datetime-picker.mjs:3892:10) at _OwlDateTimeContainerComponent.ngAfterContentInit (danielmoncada-angular-datetime-picker.mjs:3758:10)

When i continue to click, i see a partially rendered calendar and even more but similar errors (Cannot read properties of null ...)

image

Does somebody have an idea how to solve this?

ChiluBhushan commented 2 months ago

Hi, it looks like it's a compiler error since OwlNativeDateTimeModule & OwlDateTimeModule are not considered ngModule classes since ng-pick-datetime is not compatible with Ivy in angular 17. I'll recommend using mat-datepicker as they have good UI and are compatible with the latest angular version.

<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

Kartax commented 2 months ago

But i need a dateTimePicker. Angular-Material not offering that is the reason for this and similar repositories.

ChiluBhushan commented 2 months ago

ok then try this, this gives date and time and the same UI too Material date time picker

Kartax commented 2 months ago

That is the one that does not work with Angular 17

NetWin commented 1 week ago

Heyho @Kartax, i just had a look at this and the demo application has basically the same setup as your code example but it works without any hickups there. See: https://github.com/NetWin/date-time-picker/blob/master/src/app/app.component.html#L22-L36

Can you provide a full example that shows this error? (Stackblitz maybe)

I also tried to use (almost) exactly the code you posted above (i only removed the angular material components / directives) and it works. image image