Angular 7无DateTime选择器？如何在输入框展示选中的组合日期时间

我来帮你搞定这个需求！要把选中的日期和时间合并显示到createdStartDate输入框里，咱们需要在组件中处理日期和时间的选择事件，然后将两者合并成格式化后的字符串同步到表单控件和输入框中。以下是具体实现步骤：

步骤1：在组件类中定义变量并注入依赖 #

首先，我们需要引入ng-bootstrap对应的日期时间类型，同时注入Angular的DatePipe来格式化日期时间（也可以手动拼接格式，用DatePipe更省心）。

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe] // 注入DatePipe
})
export class YourComponent {
  managePromotionsForm: FormGroup;
  selectedDate: NgbDateStruct;
  selectedTime: NgbTimeStruct;

  // 获取popover和picker的引用（可选，用于处理popover关闭等场景）
  @ViewChild('dateTimePicker') dateTimePicker;
  @ViewChild('createdStartDate') datePicker;
  @ViewChild('createdStartTime') timePicker;

  constructor(private datePipe: DatePipe) {
    // 初始化表单
    this.managePromotionsForm = new FormGroup({
      createdStartDate: new FormControl('')
    });
  }

  // 快捷获取表单控件
  get controls() {
    return this.managePromotionsForm.controls;
  }
}

步骤2：修改模板，添加选择事件绑定 #

给ngb-datepicker和ngb-timepicker分别绑定选择事件，同时确保输入框能正确显示格式化后的内容：

<ng-template #dateTimePicker>
  <!-- 添加dateSelect事件，监听日期选择 -->
  <ngb-datepicker #createdStartDate name="datepicker" 
                  [(ngModel)]="selectedDate" (dateSelect)="updateDateTimeInput()"></ngb-datepicker>
  <!-- 添加timeChange事件，监听时间选择 -->
  <ngb-timepicker #createdStartTime name="timepicker" [meridian]="true"
                  [(ngModel)]="selectedTime" (timeChange)="updateDateTimeInput()"></ngb-timepicker>
</ng-template>

<form [formGroup]="managePromotionsForm">
  <div class="col-md-6">
    <div class="row form-group">
      <label class="col-md-4 control-label" for="createdStartDate" translate="">Created From </label>
      <div class="col-md-6">
        <div class="input-group">
          <!-- 输入框只读，显示格式化后的日期时间 -->
          <input readOnly class="form-control" id="createdStartDate" placeholder="From Date" 
                 [formControl]="controls['createdStartDate']">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" 
                    [ngbPopover]="dateTimePicker" type="button"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

步骤3：实现日期时间合并与格式化方法 #

在组件类中添加updateDateTimeInput()方法，负责将选中的日期和时间合并成一个格式化的字符串，并更新表单控件的值：

updateDateTimeInput() {
  // 确保日期和时间都已选中
  if (this.selectedDate && this.selectedTime) {
    // 注意：NgbDateStruct的month是1-based，JS Date的月份是0-based，需要减1
    const combinedDate = new Date(
      this.selectedDate.year,
      this.selectedDate.month - 1,
      this.selectedDate.day,
      this.selectedTime.hour,
      this.selectedTime.minute,
      this.selectedTime.second || 0
    );

    // 自定义日期时间格式，比如'yyyy-MM-dd HH:mm:ss'或者'MM/dd/yyyy hh:mm a'（带上午下午）
    const formattedDateTime = this.datePipe.transform(combinedDate, 'yyyy-MM-dd HH:mm:ss');
    
    // 更新表单控件的值，输入框会自动同步显示
    this.controls['createdStartDate'].setValue(formattedDateTime);
  }
}

可选：处理回显场景（编辑时的日期时间拆分） #

如果需要在编辑场景中，把已有的日期时间值拆分成日期和时间回显到picker中，可以添加一个方法来解析表单值：

ngOnInit() {
  // 假设从接口获取了初始值，比如'2024-05-20 14:30:00'
  const initialDateTime = '2024-05-20 14:30:00';
  if (initialDateTime) {
    const date = new Date(initialDateTime);
    // 拆分日期到NgbDateStruct
    this.selectedDate = {
      year: date.getFullYear(),
      month: date.getMonth() + 1, // 转成1-based
      day: date.getDate()
    };
    // 拆分时间到NgbTimeStruct
    this.selectedTime = {
      hour: date.getHours(),
      minute: date.getMinutes(),
      second: date.getSeconds()
    };
    // 初始化输入框显示
    this.updateDateTimeInput();
  }
}

关键注意点 #

• 月份转换：NgbDateStruct的month属性是1-based（1代表1月），而JavaScript的Date对象月份是0-based（0代表1月），所以组合时一定要减1，避免日期错误。
• 格式自定义：可以根据需求修改datePipe.transform的第二个参数，比如'MM/dd/yyyy hh:mm a'会显示05/20/2024 02:30 PM这种带上午下午的格式。
• 表单同步：通过setValue更新表单控件后，输入框会自动同步显示，因为输入框已经绑定了formControl。

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