Angular 7是否存在DateTimePicker组件？如何在对应版本环境下实现？

方案1：组合现有独立日期、时间选择器（无额外依赖侵入） #

该方案直接复用你已找到的独立组件，无需引入新依赖，实现成本最低：

• 优先选用兼容Angular 7 + Bootstrap3的组件库，推荐ngx-bootstrap 2.x系列（高版本不再兼容Bootstrap3），执行安装命令：
  npm install ngx-bootstrap@2.0.5 --save
• 在业务模块或根模块中导入所需组件：

  import { BsDatepickerModule, TimepickerModule } from 'ngx-bootstrap';
  @NgModule({
    imports: [
      BsDatepickerModule.forRoot(),
      TimepickerModule.forRoot()
    ]
  })
  

• 模板中两个组件绑定同一个Date类型变量即可自动联动，无需额外逻辑：

  <!-- 日期选择器，仅修改年月日部分 -->
  <input 
    type="text" 
    bsDatepicker 
    [(ngModel)]="selectedDateTime" 
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-default' }"
    placeholder="选择日期"
  >
  <!-- 时间选择器，仅修改时分秒部分 -->
  <timepicker 
    [(ngModel)]="selectedDateTime" 
    [showMeridian]="false"
    [minuteStep]="1"
  ></timepicker>
  

• 最终selectedDateTime变量会自动同步两部分的选择结果，直接作为完整日期时间值使用即可。

方案2：封装Bootstrap3原生jQuery datetimepicker（功能更完整） #

如果需要更统一的交互样式，可以封装Bootstrap3生态成熟的jQuery版datetimepicker为Angular指令：

• 先将jQuery、Bootstrap3的JS/CSS、bootstrap-datetimepicker的JS/CSS资源，配置到angular.json的styles和scripts数组中
• 自定义封装指令，示例代码如下：

  import { Directive, ElementRef, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
  declare var $: any;
  
  @Directive({
    selector: '[appDatetimepicker]'
  })
  export class DatetimepickerDirective implements OnInit, OnDestroy {
    @Output() datetimeChange = new EventEmitter<Date>();
    private pickerInstance: any;
  
    constructor(private el: ElementRef) {}
  
    ngOnInit() {
      this.pickerInstance = $(this.el.nativeElement).datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        todayBtn: true,
        minuteStep: 1
      }).on('changeDate', (e) => {
        this.datetimeChange.emit(e.date);
      });
    }
  
    ngOnDestroy() {
      // 销毁实例避免内存泄漏
      if (this.pickerInstance) {
        this.pickerInstance.datetimepicker('remove');
      }
    }
  }
  

• 使用时直接在输入框上绑定指令即可：

  <input 
    type="text" 
    appDatetimepicker 
    (datetimeChange)="handleDatetimeChange($event)"
    placeholder="选择日期时间"
  >
  

注意事项 #

• 所有依赖版本必须匹配，Angular 7.2 不可使用3.0及以上版本的ngx-bootstrap，会出现样式兼容问题
• 使用jQuery封装方案时，注意在组件销毁时主动释放插件实例，避免内存泄漏

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