Angular 4中owl-date-time组件pickerType绑定失败及模块导入问题

针对你碰到的这两个问题，我来一步步帮你排查和解决：

问题1：Can't bind to 'pickerType' since it isn't a known property of 'owl-date-time' #

这个报错通常有几个核心原因，我们逐个排查：

1. 模块未正确导入
   确保你在使用该组件的模块（比如AppModule或你的功能模块）中，已经导入了OwlDateTimeModule和OwlNativeDateTimeModule，并添加到imports数组中：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       OwlDateTimeModule,
       OwlNativeDateTimeModule // 这个模块负责原生日期适配，必须导入
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 版本不兼容（最可能的原因）
   Angular 4仅兼容ng-pick-datetime的5.x版本及以下，更高版本（6+）是为Angular 6+设计的。而pickerType属性是在较新版本中才引入的，旧版本中对应的属性是mode。如果你的包版本不对，就会出现属性不存在的报错：

   • 先卸载当前版本：

     npm uninstall ng-pick-datetime
     

   • 安装适配Angular 4的版本：

     npm install ng-pick-datetime@5.2.6 --save
     

   • 最后把模板中的pickerType替换为mode：

     <owl-date-time [mode]="'timer'" [(ngModel)]="selectedStartDate" [min]="minDate"></owl-date-time>
     

问题2：ng-pick-datetime-highlight无法导入OwlDateTimeModule #

这个问题同样和版本匹配、导入路径有关：

1. 匹配高亮包的版本
   ng-pick-datetime-highlight需要和ng-pick-datetime的版本严格对应。如果你安装的是ng-pick-datetime@5.x，那么高亮包也得安装同版本：

   npm install ng-pick-datetime-highlight@5.2.6 --save
   

2. 纠正导入路径
   注意OwlDateTimeModule是从ng-pick-datetime包导入的，而非高亮包。高亮包提供的是日期高亮指令，你需要导入的是OwlDateTimeHighlightModule：

   import { OwlDateTimeHighlightModule } from 'ng-pick-datetime-highlight';
   
   @NgModule({
     imports: [
       // ...其他已导入的模块
       OwlDateTimeHighlightModule
     ]
   })
   export class AppModule { }
   

最后别忘了重启Angular开发服务器，确保所有依赖都正确加载生效。

内容的提问来源于stack exchange，提问作者Sreekanth Reddy