如何实现datetime-local输入框显示mm/dd/yyyy hh:mm AM/PM格式

咱先明确一点：原生的datetime-local输入框的显示格式是由浏览器说了算的，它只认符合ISO 8601标准的yyyy-MM-ddThh:mm格式，没法直接改成你想要的mm/dd/yyyy hh:mm AM/PM或者带空格占位的格式。不过别担心，用Angular的表单能力和日期格式化工具完全能实现你的需求，下面给你两种靠谱的方案：

方案一：自定义文本输入框 + DatePipe（无第三方依赖） #

这个方案不用额外加组件库，靠原生Angular能力就能搞定，核心思路是用文本框显示格式化后的日期，隐藏一个原生datetime-local输入框来处理日期选择逻辑。

步骤1：修改transaction.component.html #

把原来的datetime-local输入框替换成下面的代码：

<!-- 用于显示格式化后日期的文本输入框 -->
<input 
  type="text" 
  class="form-control" 
  [formControl]="dateTransactionForm.controls['toDateTransaction']"
  [value]="toDateTransaction | date:'MM/dd/yyyy hh:mm a'"
  (focus)="openDatePicker($event)"
  readonly
>

<!-- 隐藏的原生datetime-local输入框，用来触发日期选择器 -->
<input 
  type="datetime-local" 
  hidden 
  #hiddenDateTimePicker
  (change)="onHiddenPickerChange($event)"
>

如果想要mm/dd/yyyy hh:mm __的格式，只需要把管道的格式字符串改成'MM/dd/yyyy hh:mm '即可。

步骤2：在transaction.component.ts中实现逻辑 #

引入必要的依赖并编写处理方法：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { DatePipe } from '@angular/common';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html',
  providers: [DatePipe] // 注入DatePipe用于格式化
})
export class TransactionComponent {
  dateTransactionForm = new FormGroup({
    toDateTransaction: new FormControl(null)
  });
  toDateTransaction: Date | null = null;

  // 获取隐藏的日期选择器元素
  @ViewChild('hiddenDateTimePicker') hiddenDateTimePicker!: ElementRef<HTMLInputElement>;

  constructor(private datePipe: DatePipe) {}

  // 点击文本框时触发隐藏的日期选择器
  openDatePicker(event: Event) {
    event.preventDefault();
    this.hiddenDateTimePicker.nativeElement.click();
  }

  // 选择日期后更新绑定的变量和表单控件
  onHiddenPickerChange(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.value) {
      this.toDateTransaction = new Date(target.value);
      this.dateTransactionForm.controls['toDateTransaction'].setValue(this.toDateTransaction);
    }
  }
}

这样用户点击文本框就会弹出原生的日期时间选择器，选择后会自动把日期格式化成你想要的样式显示，同时表单控件绑定的是标准Date类型，符合你原来的useValueAsDate需求。

方案二：使用Angular Material Datepicker（适合已用Material的项目） #

如果你的项目已经引入了Angular Material组件库，这个方案更简洁，Material的Datepicker支持自定义显示格式，包括12小时制。

步骤1：确保模块已导入 #

在你的交易模块（比如TransactionModule）中导入必要的Material模块：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    // ...其他已导入的模块
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule
  ]
})
export class TransactionModule {}

步骤2：修改transaction.component.html #

替换成Material的日期输入框：

<mat-form-field appearance="fill">
  <input 
    matInput 
    [matDatepicker]="picker" 
    class="form-control"
    [formControl]="dateTransactionForm.controls['toDateTransaction']"
    [(ngModel)]="toDateTransaction"
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

步骤3：配置自定义日期格式（全局/组件级） #

想要显示mm/dd/yyyy hh:mm AM/PM格式，需要配置日期格式规则。可以全局配置（在AppModule中）：

import { MAT_DATE_FORMATS } from '@angular/material/core';

// 自定义日期格式
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/dd/yyyy hh:mm a',
  },
  display: {
    dateInput: 'MM/dd/yyyy hh:mm a',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

@NgModule({
  // ...其他配置
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})
export class AppModule {}

配置后，输入框就会自动显示你想要的格式，同时支持点击弹出日期选择器。

注意事项 #

• 方案一中给文本框加了readonly属性，避免用户手动输入错误格式的日期，如果你需要允许手动输入，得额外加格式验证逻辑。
• 两种方案都保持了表单控件绑定的是Date类型，和你原来的useValueAsDate需求一致，不会影响表单的提交和后续处理。

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