如何使用ng-bootstrap实现单弹窗日期时间选择器并输出指定格式？

核心满足：单弹窗同时选日期时间、提交输出yyyy-mm-ddTHH:mm:ss.sssZ格式、24小时制、可选展示格式为dd/mm/yyyy

前置准备 #

确保项目已完成Angular、Bootstrap和ng-bootstrap的版本适配，基础依赖安装完成。如果还未安装ng-bootstrap，执行以下命令：

npm install @ng-bootstrap/ng-bootstrap bootstrap

安装完成后在对应模块导入NgbDatepickerModule、NgbTimepickerModule、NgbPopoverModule以及FormsModule。

组件模板实现 #

通过ng-bootstrap的popover组件承载日期+时间选择器，实现单弹窗效果：

<!-- 表单输入字段 -->
<div class="form-group">
  <label for="datetime">日期时间</label>
  <input
    id="datetime"
    class="form-control"
    placeholder="dd/mm/yyyy HH:mm"
    [(ngModel)]="showDateTimeStr"
    [ngbPopover]="datetimePickerTpl"
    #datetimePopover="ngbPopover"
    popoverClass="custom-datetime-popover"
    [autoClose]="'outside'"
    readonly
  >
</div>

<!-- 弹窗内容模板 -->
<ng-template #datetimePickerTpl>
  <div class="d-flex flex-column gap-2 p-2">
    <!-- 日期选择器 -->
    <ngb-datepicker
      [(ngModel)]="selectedDate"
      (dateSelect)="mergeDateTime()"
      [displayMonths]="1"
    ></ngb-datepicker>
    <!-- 24小时制时间选择器 -->
    <ngb-timepicker
      [(ngModel)]="selectedTime"
      (timeChange)="mergeDateTime()"
      [meridian]="false"
      [secondStep]="1"
    ></ngb-timepicker>
    <button class="btn btn-primary btn-sm" (click)="datetimePopover.close()">确认选择</button>
  </div>
</ng-template>

组件逻辑实现 #

import { Component, ViewChild } from '@angular/core';
import { NgbDateStruct, NgbTimeStruct, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html',
  providers: [DatePipe]
})
export class DatetimePickerComponent {
  @ViewChild('datetimePopover') datetimePopover!: NgbPopover;
  selectedDate: NgbDateStruct | null = null;
  selectedTime: NgbTimeStruct | null = {hour: 0, minute: 0, second: 0};
  showDateTimeStr: string = '';

  constructor(private datePipe: DatePipe) {}

  // 合并日期时间为前端展示用的dd/mm/yyyy格式
  mergeDateTime() {
    if (!this.selectedDate || !this.selectedTime) return;
    const mergeDate = new Date(
      this.selectedDate.year,
      this.selectedDate.month - 1,
      this.selectedDate.day,
      this.selectedTime.hour,
      this.selectedTime.minute,
      this.selectedTime.second
    );
    this.showDateTimeStr = this.datePipe.transform(mergeDate, 'dd/MM/yyyy HH:mm') || '';
  }

  // 表单提交时调用，获取服务端要求的标准ISO格式
  getSubmitDateTime(): string | null {
    if (!this.selectedDate || !this.selectedTime) return null;
    const mergeDate = new Date(
      this.selectedDate.year,
      this.selectedDate.month - 1,
      this.selectedDate.day,
      this.selectedTime.hour,
      this.selectedTime.minute,
      this.selectedTime.second
    );
    // 原生toISOString直接输出符合要求的 yyyy-mm-ddTHH:mm:ss.sssZ 格式，自动为UTC时间
    return mergeDate.toISOString();
  }
}

可选样式调整 #

添加全局样式避免弹窗宽度挤压：

.custom-datetime-popover {
  max-width: unset;
}

表单提交处理 #

提交表单时直接调用getSubmitDateTime()方法拿到符合格式要求的时间值传给后端即可，如果使用响应式表单，可在提交回调中将转换后的值赋值给对应表单控件。

实现效果 #

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