Angular 9 ng-pick-datetime datetime picker not opening and giving error

Question

I recently migrated my application code from Angular 8 to Angular 9. I used ng-pick-datetime with Angular 8. But it is not working with Angular 9. Given is my module code:-

import { AppCodeComponent } from "./app-code.component";
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS, DateTimeAdapter, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime-ex';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
   fullPickerInput: 'DD MMM YYYY',
   datePickerInput: 'DD MMM YYYY',
   timePickerInput: 'LT',
   monthYearLabel: 'MMM YYYY',
   dateA11yLabel: 'LL',
   monthYearA11yLabel: 'MMMM YYYY'
};


@NgModule( {
imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    DynamicComponentLoaderModule.forChild( AppCodeComponent )
],
declarations: [AppCodeComponent],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, DatePipe,
{ provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }]
} )

export class AppCodeModule { }

When I tried to launch my application, the date time picker was not opening and when I check the console I saw the following error:-

ERROR TypeError: this.dtPicker.registerInput is not a function
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.registerDateTimePicker (ng-pick-datetime-ex.js:4176)
at OwlDateTimeInputDirective.set [as owlDateTime] (ng-pick-datetime-ex.js:3842)
at setInputsForProperty (core.js:9026)
at elementPropertyInternal (core.js:8091)
at ɵɵproperty (core.js:14452)
at ViewExpensesComponent_div_40_Template (view-expenses.component.html:222)
at executeTemplate (core.js:7706)
at refreshView (core.js:7583)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)

ERROR TypeError: Cannot read property 'subscribe' of undefined
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.ngAfterContentInit (ng-pick-datetime-ex.js:4038)
at callHook (core.js:2951)
at callHooks (core.js:2921)
at executeInitAndCheckHooks (core.js:2873)
at refreshView (core.js:7620)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)
at refreshComponent (core.js:8739)
at refreshChildComponents (core.js:7376)
at refreshView (core.js:7629)

I changed ng-pick-datetime to ng-pick-datetime-ex because ng-pick-datetime wasn't working and giving the same error. Any help would be appreciated.

score 3 · Answer 1 · answered Mar 16 '21 at 09:14

3

Late answer but I also had this issue while trying to update from Angular 8 to Angular 9 and found out that ng-pick-datetime (here 's the discussion on Github link ) has been abandoned by its creator and doesn't support angular ivy.
No worry, there's a new forked/updated version that should be compatible and have the same features.

answered Mar 16 '21 at 09:14

AnotherOne

854
2
8
19

Good point. Me and my team already have switched to https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker – Chetan Oswal Mar 17 '21 at 10:14

score 1 · Accepted Answer · answered May 12 '20 at 11:16

I have identified my problem. I had not properly used the angular elements. What I did was following:-

<div id="ems_view_endDate_div" class="secondary-border">
     <input #endDate type="text" [readonly]="true"
          style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
          placeholder="DD MMM YYYY" class="datepicker" 
          [(ngModel)]="endDateVal" 
          id="ems_view_endDate" 
          [owlDateTimeTrigger]="endDate" [owlDateTime]="endDate">

     <owl-date-time (afterPickerOpen)="endDateOpened()" 
        (afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
        [pickerType]="'calendar'" #endDate></owl-date-time>

</div>

The problem was I used #endDate two times. Later I just did the following:-

<div id="ems_view_endDate_div" class="secondary-border">
     <input #endDate type="text" [readonly]="true"
          style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
          placeholder="DD MMM YYYY" class="datepicker" 
          [(ngModel)]="endDateVal" 
          id="ems_view_endDate" 
          [owlDateTimeTrigger]="endDateTrigger" [owlDateTime]="endDateTrigger">

     <owl-date-time (afterPickerOpen)="endDateOpened()" 
        (afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
        [pickerType]="'calendar'" #endDateTrigger></owl-date-time>

</div>

I changed the owl-date-time angular element from #endDate to #endDateTrigger and used the same in [owlDateTimeTrigger] and [owlDateTime]. This solved my problem. But I still don't understand that why my earlier code worked in Angular 8. I guess Google has made Angular 9 more robust.

If i need to set dynamic [owlDateTimeTrigger] and [owlDateTime] value and the ID of owl-date-time directive, How can i do this? i need to render list of formgroup. — shiva, Mar 23 '21 at 17:23
I don't know if you can set dynamic directive values. But you can iterate your list, get the index value of the list and use it for your directive value. Example - `*ngFor="let value of list; let i=index"` So, you can use that index value **i** as `[owlDateTimeTrigger]="endDateTrigger{{i}}"`. Use the same below - `#endDateTrigger{{i}}` — Chetan Oswal, Mar 31 '21 at 11:42
`@ViewChildren` may help you - https://stackoverflow.com/questions/48562310/use-viewchild-for-dynamic-elements-angular-2-ionic-2 — Chetan Oswal, Mar 31 '21 at 12:02

Angular 9 ng-pick-datetime datetime picker not opening and giving error

2 Answers2