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 表单中，所以我的输入没有绑定到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' }}">

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

score 27 · Accepted Answer

[(bsValue)]始终可用于bsDatepicker, 是否为输入字段

如果您只想更改一个字段的格式，那么

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

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

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

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

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

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

score 6 · Accepted Answer

如果您使用的是日期范围选择器，那么您应该在 [bsConfig] 中使用rangeInputFormat而不是 dateInputFormat。

score 4 · Accepted Answer

您能否详细说明如何使用此配置文件来使用全局日期格式？

我浏览了您在上面提供的 github 链接，但无法弄清楚如何在我的项目中使用它，因为它有很多导入文件。我目前正在使用下面的内联代码来更改日期格式。

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

有没有一种方法可以将此日期格式“yyyy-MM-dd”全局放入配置文件中，以便我可以在 bsDatepicker 的任何字段中打印日期而无需明确提及格式？

3 回答 3