Angular Bootstrap Datepicker自定义dd-MMM-yyyy格式问题求助

问题描述 #

需为Angular Bootstrap Datepicker设置dd-MMM-yyyy格式（示例："01-Sep-2023"），尝试使用NgbDateParserFormatter但未生效，当前代码及现象如下：

组件模板（component.html） #

<div class="input-group">
    <input
        class="form-control"
        placeholder="yyyy-mm-dd"
        name="dp"
        [(ngModel)]="model"
        ngbDatepicker
        #d="ngbDatepicker"
    />
    <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
</div>
<pre>Model: {{ model | json }}</pre>

当前输出结果 #

Model: {
  "year": 2023,
  "month": 9,
  "day": 21
}

组件代码（component.ts） #

import { Component } from '@angular/core';
import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
    selector: 'ngbd-datepicker-popup',
    standalone: true,
    imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
    templateUrl: './datepicker-popup.html',
})
export class NgbdDatepickerPopup {
    model: NgbDateStruct;
}

解决方案 #

要实现自定义日期格式，需正确自定义NgbDateParserFormatter并注入到组件中，步骤如下：

1. 创建自定义格式化器类 #

新建custom-date-formatter.ts文件，实现NgbDateParserFormatter接口：

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

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  // 月份缩写数组
  private readonly MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  // 将NgbDateStruct转换为输入框显示的字符串
  format(date: NgbDateStruct | null): string {
    if (!date) return '';
    const monthStr = this.MONTHS[date.month - 1];
    return `${this.padZero(date.day)}-${monthStr}-${date.year}`;
  }

  // 将输入框字符串转换为NgbDateStruct供模型绑定
  parse(value: string): NgbDateStruct | null {
    if (!value) return null;
    const parts = value.split('-');
    if (parts.length !== 3) return null;
    
    const monthIndex = this.MONTHS.indexOf(parts[1]);
    if (monthIndex === -1) return null;

    return {
      year: parseInt(parts[2], 10),
      month: monthIndex + 1,
      day: parseInt(parts[0], 10)
    };
  }

  // 日期补零辅助方法
  private padZero(num: number): string {
    return num < 10 ? `0${num}` : `${num}`;
  }
}

2. 在组件中注入自定义格式化器 #

修改component.ts，导入并配置自定义格式化器：

import { Component } from '@angular/core';
import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';
import { CustomDateParserFormatter } from './custom-date-formatter';

@Component({
    selector: 'ngbd-datepicker-popup',
    standalone: true,
    imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
    templateUrl: './datepicker-popup.html',
    providers: [{ provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }]
})
export class NgbdDatepickerPopup {
    model: NgbDateStruct;
}

3. 更新模板占位符 #

修改输入框的placeholder为目标格式：

<input
    class="form-control"
    placeholder="dd-MMM-yyyy"
    name="dp"
    [(ngModel)]="model"
    ngbDatepicker
    #d="ngbDatepicker"
/>

效果验证 #

完成配置后：

• 选择日期时，输入框将显示21-Sep-2023格式的字符串
• 模型model仍保持NgbDateStruct结构（包含year/month/day字段），不影响业务逻辑处理

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