如何在ng-bootstrap中设置默认日期格式为'dd/mm/yyyy'及配置日期输入控件格式

我来帮你搞定这个日期格式的需求，结合你当前的代码和ng-bootstrap的特性，分步骤给你说明方案：

一、替换原生<input type="date">为ng-bootstrap日期组件 #

首先要明确：原生的<input type="date">控件的显示格式是由用户的操作系统/浏览器区域设置决定的，没办法直接通过代码强制改成dd/mm/yyyy。要实现自定义格式的日期输入，最稳妥的方式是用ng-bootstrap的ngbDatepicker组件，它完全支持自定义格式，还自带日期选择弹窗，跨浏览器体验更一致。

替换后的HTML代码可以改成这样：

<label for="date">{{ "date" | translate }}</label>
<div class="input-group">
  <input 
    class="form-control checking-field" 
    id="date"
    [(ngModel)]="selectedDate" <!-- 绑定你组件内的日期变量 -->
    ngbDatepicker
    #d="ngbDatepicker"
    placeholder="dd/mm/yyyy" <!-- 提示用户输入格式 -->
  >
  <!-- 可选：添加日期选择器触发按钮 -->
  <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
    📅
  </button>
</div>

二、全局设置ng-bootstrap默认日期格式为dd/mm/yyyy #

要让所有ng-bootstrap的日期组件都默认使用这个格式，你需要自定义一个日期解析格式化器，然后全局注册：

1. 创建自定义格式化器类（比如新建custom-date-parser-formatter.ts文件）：

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  private readonly dateSeparator = '/';

  // 把用户输入的字符串解析成NgbDateStruct对象
  parse(value: string): NgbDateStruct | null {
    if (!value) return null;
    const dateParts = value.split(this.dateSeparator);
    return {
      day: parseInt(dateParts[0], 10),
      month: parseInt(dateParts[1], 10),
      year: parseInt(dateParts[2], 10)
    };
  }

  // 把NgbDateStruct对象格式化成dd/mm/yyyy字符串
  format(date: NgbDateStruct | null): string {
    if (!date) return '';
    return `${this.padZero(date.day)}${this.dateSeparator}${this.padZero(date.month)}${this.dateSeparator}${date.year}`;
  }

  // 给单个数字补零（比如5变成05）
  private padZero(num: number): string {
    return num < 10 ? `0${num}` : `${num}`;
  }
}

2. 在你的模块（比如app.module.ts）里注册这个自定义格式化器：

import { NgModule } from '@angular/core';
import { NgbModule, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from './custom-date-parser-formatter';

@NgModule({
  imports: [NgbModule],
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class AppModule { }

三、关于原生日期输入的备选方案（不推荐） #

如果实在要保留原生<input type="date">，只能通过JS手动处理格式转换：

• 监听输入事件，把用户输入的dd/mm/yyyy格式转成ISO标准格式（yyyy-MM-dd）赋值给控件的value（因为原生控件只认ISO格式的value）
• 同时在控件显示时，把ISO格式转回dd/mm/yyyy

但这种方法会有兼容性问题，比如不同浏览器的输入行为不一致，而且不如ng-bootstrap组件稳定，所以还是推荐用ng-bootstrap的方案。

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