在Angular4+Node.js项目中实现datetimepicker的技术求助

嘿，我来帮你把这个datetimepicker在Angular 4 + Node.js项目里完美落地！看你已经写了基础的HTML结构，接下来咱们一步步补全剩下的实现细节：

方案一：基于你现有代码的Bootstrap Datetimepicker（依赖jQuery） #

这个方案延续你已有的HTML结构，需要引入jQuery、Bootstrap和datetimepicker相关依赖：

1. 安装依赖包 #

打开终端，在项目根目录执行：

npm install jquery bootstrap moment bootstrap-datetimepicker --save

2. 配置Angular CLI（angular-cli.json） #

找到项目根目录的angular-cli.json文件，在styles和scripts数组中添加依赖资源：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/moment/min/moment.min.js",
  "../node_modules/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
]

3. 完善组件逻辑 #

在你的组件TS文件中，利用ngAfterViewInit钩子初始化datetimepicker（确保DOM已加载完成）：

import { Component, AfterViewInit, ElementRef } from '@angular/core';
declare var $: any; // 声明jQuery避免类型报错

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  selectedDate: string; // 用于绑定选中的日期时间

  constructor(private elRef: ElementRef) { }

  ngAfterViewInit() {
    // 初始化datetimepicker，可自定义配置
    $(this.elRef.nativeElement).find('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss', // 自定义日期格式
      locale: 'zh-cn', // 切换为中文（需要确保moment支持中文，可额外安装moment-locale-zh-cn）
      showTodayButton: true // 显示"今天"按钮
    });
  }
}

4. 完善HTML模板（绑定ngModel） #

给输入框添加双向绑定，方便获取选中值：

<div class="container">
  <div class="row">
    <div class='col-sm-2'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" [(ngModel)]="selectedDate" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

5. 别忘了导入FormsModule #

在你的模块文件（比如app.module.ts）中导入FormsModule，否则ngModel无法生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入的模块
    FormsModule
  ]
})
export class AppModule { }

方案二：更贴合Angular生态的ngx-bootstrap DateTimePicker（无jQuery依赖） #

如果不想引入jQuery，推荐使用Angular专属的组件库ngx-bootstrap，实现更优雅：

1. 安装依赖 #

npm install ngx-bootstrap bootstrap --save

2. 配置样式 #

在angular-cli.json的styles数组中添加Bootstrap样式：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
]

3. 导入模块 #

在app.module.ts中导入日期选择相关模块：

import { BsDatepickerModule, TimepickerModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
    // 其他模块
    BsDatepickerModule.forRoot(),
    TimepickerModule.forRoot()
  ]
})
export class AppModule { }

4. 组件实现 #

TS文件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedDate: Date; // 用Date类型直接绑定
}

HTML模板：

<div class="container">
  <div class="row">
    <div class='col-sm-2'>
      <div class="form-group">
        <input type="text" 
               class="form-control" 
               bsDatepicker 
               [(bsValue)]="selectedDate"
               [bsConfig]="{ 
                 dateInputFormat: 'YYYY-MM-DD HH:mm:ss',
                 showTimepicker: true 
               }"
               placeholder="选择日期时间" />
      </div>
    </div>
  </div>
</div>

两种方案都能实现需求，如果你想延续现有代码选方案一，追求Angular原生体验选方案二～

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