Ng Date Picker 如何格式化为不同的输出而不是 ISO-8601答案

【问题标题】：Ng Date Picker How to format to different output instead of ISO-8601Ng Date Picker 如何格式化为不同的输出而不是 ISO-8601
【发布时间】：2019-02-04 05:21:55
【问题描述】：

首先，对于想知道的人，我指的是这个 DatePicker

https://danielykpan.github.io/date-time-picker/#locale-formats

虽然 DatePicker 的感觉和外观都很棒，但我在输出值方面存在问题。有许多选项可以格式化日期的视图部分，但我没有看到或找到关于如何在我的形式。我以反应形式使用日期选择器，并且我有几个具有类似先决条件的页面。我需要将此值解析为不同的格式。比如……

29-08-2018

我的第一次尝试（一开始不太聪明）是使用 [(ngModel)]="dateField" 来获取输入的值并将其更改为我想要的值。不用说，当然它在视图中也发生了变化，因为我没有引用表单字段的索引，它只是导致了一个空白字段。不久之后，我意识到这种方法一开始就很糟糕，但是由于我找不到这个特定问题的配置，所以我对我能做什么感到很迷茫。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

使用 moment js libaray 。它是一个简单而丰富的库，可以帮助你；

你可以通过 npm 获得它：npm i moment。

然后你可以像这样转换格式：

moment("2018-08-29","YYYY-MM-DD").format("YYYY-DD-MM"); // outputs : 2018-29-08

或

moment("2018-08-29","YYYY-MM-DD").format("DD-MM-YYYY"); // outputs : 29-08-2018

【讨论】：

遗憾的是，这并不能解决根本问题。我知道您可以用时刻格式化日期，但是在日期选择器的上下文中我该如何做呢？

【解决方案2】：

@ak.leimrey。通常所有的日期选择器都会给你一个类型的值（在你的情况下是 ISO 中的字符串格式，其他情况下，例如使用 ng-bootstrap，返回一个带有日、月和年的对象）。如果您想以其他格式发送，在提交中您可以映射值并转换 form.value。

submit(form)
{
   if (form.valid)
   {
      let result={
         ...form.value, //all the values of the form, but change some one
         searchParams:form.value.searchParams.map(x=>{
             ...x
             value.map(v=>{
                let items=v.split('-');
                return items[2].substr(0,2)+"-"+items[1]+"-"+items[0];
             })
         })
      }
      console.log(result)
   }
}

是的，在您的情况下转换对象有些困难，但使用扩展运算符和映射您可以转换值

【讨论】：

似乎这是唯一明智的解决方案！希望后端人员可以使用实际的标准化日期格式。非常感谢！