如何为ng-bootstrap datepicker设置dd/mm/yyyy格式的模型值

嘿，这个问题我之前也折腾过，ng-bootstrap的Datepicker默认确实用的是美式mm/dd/yyyy格式绑定到模型，要改成dd/mm/yyyy其实只需要自定义日期解析/格式化器就行，下面给你两种实用的方案：

方案一：全局配置（整个应用生效） #

你可以创建一个自定义的NgbDateParserFormatter实现，然后在根模块里提供它，这样整个应用的Datepicker都会统一使用这个格式。

1. 先创建一个自定义格式化器文件，比如custom-date-formatter.ts：

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

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  // 将DateStruct转换为字符串（用于显示，同时也是模型绑定的格式）
  format(date: NgbDateStruct | null): string {
    return date ? `${this.padNumber(date.day)}/${this.padNumber(date.month)}/${date.year}` : '';
  }

  // 将用户输入的字符串转换为DateStruct（解析日期）
  parse(value: string): NgbDateStruct | null {
    if (!value) {
      return null;
    }
    const dateParts = value.split('/');
    if (dateParts.length !== 3) {
      return null;
    }
    return {
      day: parseInt(dateParts[0], 10),
      month: parseInt(dateParts[1], 10),
      year: parseInt(dateParts[2], 10)
    };
  }

  private padNumber(value: number): string {
    return value < 10 ? `0${value}` : value.toString();
  }
}

2. 在你的根模块（比如app.module.ts）里，把这个自定义格式化器提供给Angular：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from './custom-date-formatter';
import { AppComponent } from './app.component';

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

配置完成后，所有Datepicker的模型值都会是dd/mm/yyyy格式的字符串了。

方案二：组件级配置（单个组件生效） #

如果你只希望某个特定组件里的Datepicker用这个格式，可以直接在该组件的providers里单独配置：

1. 先准备好上面的CustomDateParserFormatter类（也可以直接把它写在组件文件里）
2. 在组件的元数据里添加providers配置：

import { Component } from '@angular/core';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from './custom-date-formatter';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class MyComponentComponent {
  selectedDate: string; // 这里的selectedDate就会是dd/mm/yyyy格式了
}

注意点 #

• 如果你的模型绑定的是NgbDateStruct对象而非字符串，其实不需要改格式——因为NgbDateStruct是包含day、month、year的结构化对象，格式只是显示和输入解析的问题。但如果需要模型是字符串格式的dd/mm/yyyy，上面的方法就完全适用。
• 自定义的parse方法已经处理了dd/mm/yyyy的解析逻辑，要是用户输入错误格式会返回null，你可以根据业务需求调整解析的容错逻辑。

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