web-dev-qa-db-ja.com

Angular ngx-bootstrapのフォーム内の日付ピッカーで日付形式を変更する方法

Angular 4アプリケーションでngx-bootstrap Datepickerを使用し、

私は通常、この方法で日付形式を指定できることを知っています：

_<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">
_

しかし、今回はテンプレート駆動のAngularフォーム内にいるため、上の例ではmyModelのような変数に入力はバインドされていませんが、形：

_<input id="from" name="from"
       bsDatepicker ngModel>
_

この場合、どのように日付形式を指定できますか？

編集：これを実現する方法は、コンポーネント内に新しい変数newVarを作成し、それを[(bsValue)]="newVar"でバインドすることです。

_<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">
_

しかし、より良い解決策があるのだろうか。

angulardatepickerangular2-ngmodelangular-formsngx-bootstrap
9
Francesco Borzi

[(bsValue)]は常にbsDatepickerで使用できます。入力フィールドかどうか

1つのフィールドのみの形式を変更する場合

[(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}"は問題ありません

bsDatepickerには入力フィールドとフォームが統合されています。これはあなたのために機能するはずです：

<input name="from" bsDatepicker [(ngModel)]="newVar">

configを使用して入力値の日付の形式をグローバルに変更できます

https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts#L31

または[bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}"bsDatepickerを持つ要素上

note：現在L形式に問題（v1.9.2）があり、常にen-usロケールを使用します

18
valorkin

日付範囲ピッカーを使用している場合は、dateInputFormatの代わりに[bsConfig]でrangeInputFormatを使用する必要があります。

2
MANMOHAN

この設定ファイルを使用してグローバルな日付形式を使用する方法について詳しく説明できますか？

上記で提供したgithubリンクを調べましたが、インポートファイルがたくさんあるため、プロジェクトでそれを使用する方法がわかりませんでした。現在、以下のインラインコードを使用して日付形式を変更しています。

bsDatepicker [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}"

この日付形式「yyyy-MM-dd」を設定ファイルにグローバルに配置して、形式を明示的に言及することなくbsDatepickerの任意のフィールドに日付を印刷する方法はありますか？

2
Pubudu Senarathne