实现自定义 NgbDateParserFormatter 以更改 NgbInputDatepicker 上输入值的格式是否正确？

Question

我在弹出窗口中使用日期选择器 (ng-boostrap)，我想将日期格式更改为 dd-mm-yyyy。

似乎可以通过实现一个新的NgbDateParserFormatter来替换默认的NgbDateISOParserFormatter来解决。

但是我想知道有没有别的办法

更新：

NgbDateParserFormatter 使用 Moment.js 的小型实现（使用 ng-bootstrap 的 1.0.0-alpha.14 版本测试）：

import {NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

export class NgbDateMomentParserFormatter extends NgbDateParserFormatter {
    constructor(private momentFormat: string) {
        super();
    };
    format(date: NgbDateStruct): string {
        if (date === null) {
            return '';
        }
        let d = moment({ year: date.year, 
                         month: date.month - 1, 
                         date: date.day });
        return d.isValid() ? d.format(this.momentFormat) : '';
    }

    parse(value: string): NgbDateStruct {
        if (!value) {
            return null;
        }
        let d = moment(value, this.momentFormat);
        return d.isValid() ? { year: d.year(), 
                               month: d.month() + 1, 
                               day: d.date() } : null;
    }
}

并且在一个模块中，您包括使用工厂的提供程序以指示日期格式作为参数：

---

@NgModule({

  ---

  providers: [
    { 
      provide: NgbDateParserFormatter, 
      useFactory: () => { return new NgbDateMomentParserFormatter("DD-MM-YYYY") } 
    }
  ]

  ---

})

Answer 1

从今天开始，实施自定义 NgbDateParserFormatter 是最好的方法。所以是的，这是一个正确的方法。

将来我们可能会有更复杂的 NgbDateParserFormatter 实现，您将能够只传递所需的格式（例如 yyyy-MM-dd）。添加此功能将取决于用户的兴趣。

您还可以在 https://github.com/ng-bootstrap/ng-bootstrap/issues/754#issuecomment-247767027

中查看更多背景信息

Answer 2

创建自定义解析器格式化程序。

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

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {

  format(date: NgbDateStruct): string {
    return date ? `${isNumber(date.day) ? padNumber(date.day) : ''}-${isNumber(date.month) ? padNumber(date.month) : ''}-${date.year}` : '';
  }
}

在@NgModule 中为自定义解析器格式化程序设置提供程序。

providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
]

如api

中所述

实现自定义 NgbDateParserFormatter 以更改 NgbInputDatepicker 上输入值的格式是否正确？

Is it correct to implement a custom NgbDateParserFormatter to change the format of the input value on NgbInputDatepicker?

angular

momentjs

ng-bootstrap