如何在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>

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

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

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

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

- Francesco Borzi

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

或在具有 bsDatepicker 的元素上使用 [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" 进行更改

注意：当前存在问题（v1.9.2），L 格式始终使用 en-us 区域设置。

- valorkin

---

请注意此问题 https://github.com/valor-software/ngx-bootstrap/issues/2809 - Felix

从2.0版本开始，我不得不使用'YYY-MM-DD'来替代'yyyy-MM-dd'。 - Francesco Borzi

Answer 2

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

- MANMOHAN

---

我通过该选项进行了修复。 - MANMOHAN

我可以确认，这个在使用日期选择器方面完美奏效的解决方案确实有效。花了我一些时间才找到这个方法！ - connectedsoftware

是的，这就是方法。 - MANMOHAN

我可以确认这个解决方案与日期范围选择器完美配合，花了我一些时间才找到这个解决方案！ - MANMOHAN

谢谢，我被文档恶搞了。 - Ap0st0l

Answer 3

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

我查看了您提供的GitHub链接，但由于有许多导入文件，无法确定如何在我的项目中使用它。目前我正在使用以下内联代码更改日期格式。 bsDatepicker [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}" 是否有一种方法可以将此日期格式“yyyy-MM-dd”全局放入配置文件中，以便我可以在bsDatepicker的任何字段中打印日期，而无需明确指定格式？

- Pubudu Senarathne

Answer 4

我已经成功通过使用rangeInputFormat来解决这个问题。为了更多的参考，我还创建了动态参考和跨日期范围选择器通信。

https://stackblitz.com/edit/ngx-daterangepicker

- Sachin Mishra

Answer 5

我找到了一个简单的解决方法，可以在修补值时绕过dateRangePicker。

component.html

  <input type="text"
        #dp="bsDaterangepicker"
        bsDaterangepicker [bsConfig]="bsConfig"
        [placeholder]="dataConfig?.selectedType?.placeHolder" readonly
        formControlName="dateOrPeriodRange">

component.ts

import { BsDaterangepickerDirective } from 'ngx-bootstrap/datepicker';
.
.
.
export class MyComponent implements OnInit {
// taking rangepicker reference
  @ViewChild(BsDaterangepickerDirective) bsDaterangepicker: BsDaterangepickerDirective;
.
.
.
//set bsConfig before patching value
this.bsConfig.rangeInputFormat = 'MM/YY';
// calling setConfig to update the config.
   this.bsDaterangepicker.setConfig();

给定的示例是用于日期范围选择器，对于简单的日期选择器，需要使用不同的指令，即BsDatepickerDirective在视图中使用viewChild。

- Prashant Singh