web-dev-qa-db-ja.com

カスタムNgbDateParserFormatterを実装してNgbInputDatepickerの入力値の形式を変更するのは正しいですか？

ポップアップで日付ピッカー（ ng-boostrap ）を使用しています。日付形式をdd-mm-yyyyに変更したいと思います。

新しいNgbDateParserFormatterを実装してデフォルトのNgbDateISOParserFormatterを置き換えることで解決できるようです。

しかし、私は別の方法があるかどうか疑問に思っていました。

UPDATE：

Moment.jsを使用したNgbDateParserFormatterの小さな実装（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") } 
    }
  ]

  ---

})
angularmomentjsng-bootstrap
47
Nelson Lopez Centeno

現在のところ、カスタムNgbDateParserFormatterを実装するのが最善の方法です。はい、それは正しい方法です。

将来的には、NgbDateParserFormatterのより洗練された実装があり、希望の形式（例：yyyy-MM-dd）。この機能の追加は、ユーザーの関心に依存します。

また、 https://github.com/ng-bootstrap/ng-bootstrap/issues/754#issuecomment-247767027 で背景情報を確認することもできます。

19
pkozlowski.opensource

カスタムパーサーフォーマッターを作成します。

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 で説明されているように

0
Asif vora