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

[Kartax]

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 ...)

Does somebody have an idea how to solve this?

[ChiluBhushan]

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]

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

[ChiluBhushan]

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

[Kartax]

That is the one that does not work with Angular 17

[NetWin]

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.

[chrissupnet29]

I'm having this issue too. Has anyone solved this?

<mat-form-field class="w-full" appearance="outline">
    <mat-label>Start Date</mat-label>
        <input
            matInput
            formControlName="startDate"
            [owlDateTime]="sDate"
            [owlDateTimeTrigger]="sDate"
            [selectMode]="'single'"
        >
        <span [owlDateTimeTrigger]="sDate"><mat-icon fontIcon="calendar_today"></mat-icon></span>

        <owl-date-time #sDate>></owl-date-time>
</mat-form-field>

I tried adding break points on the line with errors and it seems like the this.dateTimeAdapter is null

[Toso7]

@chrissupnet29 I had same issue in dialog component, I resolved it by

providers: [ { provide: DateTimeAdapter, useClass: NativeDateTimeAdapter, }, ]

[SergioV85]

Thank you, @Toso7, for your suggestion. I had the same problem with my code, and I was able to solve it using your solution.
Also, I had a problem with formats, so I solved it by adding:
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_OWL_FORMATS },
to providers in components.

MY_OWL_FORMATS I've just copied from here

[Toso7]

@SergioV85 Yes I already use custom owl formats.

I had another problem: Cannot display multiyear picker in material dialog. I fixed it with this:

{ provide: OptionsTokens.multiYear, useFactory: multiYearOptionsFactory, deps: [OptionsTokens.all], }

I hope that I save somebody's time :D