反应形式的 ngx-bootstrap 日期选择器格式值答案

【问题标题】：ngx-bootstrap's datepicker format value in reactive forms反应形式的 ngx-bootstrap 日期选择器格式值
【发布时间】：2017-10-30 21:57:49
【问题描述】：

我正在处理这个例子： https://valor-software.com/ngx-bootstrap/#/datepicker#reactive

如您所见，“日期”的 {{ Form.value }} 的值采用“日期”格式：“2017-10-14T17:38:53.000Z”，如何将其更改为“ 14/10/2017”作为示例，因为该格式没有通过我的正则表达式验证！

我尝试过使用代码示例，还阅读了有关 DatePicker 模块的所有文档，但我不知道该怎么做！

【问题讨论】：

标签： angular ngx-bootstrap

【解决方案1】：

您可以使用普通的javascript 日期格式方法。当您选择日期时，触发事件并格式化日期。最后将格式化日期设置为 formControlName.

例如：

dateFormat("Fri Dec 01 2017 14:41:37 GMT+0530 (India Standard Time)");

dateFormat(date:any){
    let date = new Date(date),
    let month = ("0" + (date.getMonth()+1)).slice(-2),
    let day  = ("0" + date.getDate()).slice(-2);
    let formattedDate=[day,month,date.getFullYear()].join("/");
    this.formName.patchValue({
      date:formattedDate }) 
}

【讨论】：

【解决方案2】：

此解决方案用于以反应形式使用的 ngx daterangepicker，并为 daterange 选择器设置 basevalue。

this.detailForm.controls['range'].setValue([new Date(this.projectData.startDate), new Date(this.projectData.endDate)]);

保存数据使用这个：

if (this.detailForm.get('range').value) { this.projectData.startDate = this.datepipe.transform(this.detailForm.value.range[0], DateFormat.YYYY_MM_DD); this.projectData.endDate = this.datepipe.transform(this.detailForm.value.range[1], DateFormat.YYYY_MM_DD); }

【讨论】：

【解决方案3】：

这个问题帮助我解决了您面临的同样问题。 https://github.com/valor-software/ngx-bootstrap/issues/2934

它基本上说对于对象（在您的情况下为“日期”，值为“2017-10-14T17:38:53.000Z”），您可以使用名为 .toLocaleDateString() 的方法，因为您的对象是 Date 类型。

ps.：我只是意识到你是在 github 上创建问题的人（lol），无论如何我会让我的答案在这里帮助其他人:)

嘿嘿

【讨论】：