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

Question

在 Angular 4 应用程序中使用 ngx-bootstrap 日期选择器，

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

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

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

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

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

Edit：看起来实现此目的的一种方法是在组件内创建一个新变量 newVar，然后将其与 [(bsValue)]="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">

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

或通过 [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" 在具有 bsDatepicker

的元素上

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

Answer 2

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

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

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

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

Answer 3

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

How to change the date format in the datepicker of Angular ngx-bootstrap inside a form