2016-09-17 1 views
34

ポップアップでdatepicker(ng-boostrap)を使用しています。日付のフォーマットを 'dd-mm-yyyy'に変更したいと思います。ng-bootstrap:カスタムNgbDateParserFormatterを実装して、NgbInputDatepickerの入力値の形式を変更するのは正しいですか?

新しいNgbDateParserFormatterを実装して、デフォルトのNgbDateISOParserFormatterを置き換えることができます。

しかし、別の方法があるのだろうかと思っていました。

ありがとう、 ネルソン。

UPDATE:

NgbDateParserFormatterの小さな実装あなたが含まmoment.js (NG-ブートストラップのバージョン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; 
    } 
} 

、モジュール内を、使用してプロバイダは日付形式をパラメータとして示すためにファクトリを使用します。カスタムNgbDateParserFormatterを実装し、今日のよう

--- 

@NgModule({ 

    --- 

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

    --- 

}) 
+0

に注意してくださいにいくつかのより多くの背景情報をチェックするかもしれない - 現時点ではゼロインデックス付きヶ月を持っていることを想定しています。あなたのコードは12月の毎日失敗します。 – David

+0

ありがとう@David、私はコードを修正しました。私がコードを投稿したとき、NgbDateStructもゼロのインデックス付き月を使用していましたが、それは後で変更されました。 –

+0

@ネルソンあなたのアプローチを試みました。私は、日付ピッカーコンポーネントの日付形式を変更するために、アプリケーションのコアモジュールにプロバイダを追加しました。動いていない。私を助けてください。 –

答えて

15

行くための最良の方法です。そう、正しい方法です。

今後、希望のフォーマット(例:yyyy-MM-dd)を渡すことができるNgbDateParserFormatterをより洗練された実装にすることができます。この機能を追加することは、ユーザーの興味に依存します。

はまたhttps://github.com/ng-bootstrap/ng-bootstrap/issues/754#issuecomment-247767027

+0

私は日付のformateをどのように変更できるのだろうか、 'NgbDateParserFormatter'を実装する方法の簡単な例を追加することは可能でしょうか? .js私は単に日付を再フォーマットできるようにしたい。 – Daimz

+3

@ pkozlowski.opensource AOTコンパイルを使用している場合、この回答はどのように変更する必要がありますか? 私は 'export function NgbDateMomentParserFormatterFactory(){ return NgbDateMomentParserFormatter(" DD-MM-YYYY ");を試みました。 } ' と'プロバイダ:[ {が提供する:NgbDateParserFormatter、 useFactory:NgbDateMomentParserFormatterFactory を}] ' それが変更を適用するようには思えません。 – murk003

+2

AOTコンパイラを使用する場合は、工場を使用しないでください。この例を試してください:https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22 – sgotre

関連する問題