angular - 如何在表单内的 Angular ngx-bootstrap 的日期选择器中更改日期格式

Question

在 Angular 4 应用程序中使用 ngx-bootstrap Datepicker，

我知道通常你可以这样指定日期格式:

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

但这次我在一个模板驱动的 Angular 表单中，所以我的输入没有绑定(bind)到像上面示例中的 myModel 这样的变量，而是绑定(bind)到表单:

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

那么在这种情况下如何指定日期格式呢？

编辑:看起来实现此目的的一种方法是在组件内创建一个新变量 newVar，然后将其与 [(bsValue) 绑定(bind)]="newVar":

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

但是我想知道是否有更好的解决方案。

Answer 1

[(bsValue)]始终可用于 bsDatepicker ,是不是输入框

如果你只想改变一个字段的格式那么

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

bsDatepicker与输入字段和表单集成，这应该适合您:

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

并且您可以通过配置全局更改输入值中的日期格式

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

或通过 [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}"在元素上 bsDatepicker

注意:目前 L 存在问题 (v1.9.2)格式，它始终使用 en-us 语言环境