时间戳

首页 > 解决方案 > Angular 9 ng-pick-datetime 日期时间选择器未打开并给出错误

angular9 - Angular 9 ng-pick-datetime 日期时间选择器未打开并给出错误

问题描述

我最近将我的应用程序代码从 Angular 8 迁移到 Angular 9。我将 ng-pick-datetime 与 Angular 8 一起使用。但它不适用于 Angular 9。给定的是我的模块代码：-

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 { }

当我尝试启动我的应用程序时，日期时间选择器没有打开，当我检查控制台时，我看到了以下错误：-

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)

我改为ng-pick-datetime因为ng-pick-datetime-ex没有ng-pick-datetime工作并给出同样的错误。任何帮助，将不胜感激。

标签： angular9owl-date-time

解决方案

我已经确定了我的问题。我没有正确使用角度元素。我所做的是：-

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

问题是我用#endDate了两次。后来我只是做了以下事情： -

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

我将 owl-date-time 角度元素从#endDateto更改为并在and#endDateTrigger中使用了相同的元素。这解决了我的问题。但我仍然不明白为什么我的早期代码在 Angular 8 中工作。我猜 Google 已经让 Angular 9 更加健壮。[owlDateTimeTrigger][owlDateTime]

推荐阅读