如何用角度格式化清晰度设计日期选择器的输出答案

【问题标题】：How can I format the output of clarity design datepicker with angular如何用角度格式化清晰度设计日期选择器的输出
【发布时间】：2021-10-15 10:55:04
【问题描述】：

我正在开发一个具有清晰设计的 Angular 应用程序。

表单标签内有一个日期选择器。那里的日期值是 10.15.2021。但我需要的格式是 2021-10-15T17:56:30.728Z。

清晰设计官方文档说如果你这样得到[(clrDate)]="date"，就会输出2021-10-15T17:56:30.728Z，但是我不想用ngmodel。我正在使用反应形式。

如何格式化来自 formcontrol 的日期信息。下面的代码

<form [formGroup]="logggForm" clrForm>
    <clr-input-container>
      <label class="clr-col-lg-4">Email:</label>
      <input class="clr-col-lg-8" clrInput formControlName="userEmail" placeholder="asd@asd.com" type="text"/>
    </clr-input-container>
    <clr-date-container>
      <label class="clr-col-lg-4">Start date:</label>
      <input class="clr-col-lg-8" clrDate formControlName="from" type="date"/>
    </clr-date-container>
    <clr-date-container>
      <label class="clr-col-lg-4">To Date:</label>
      <input class="clr-col-lg-8" clrDate formControlName="to" type="date"/>
    </clr-date-container>
    <button (click)="click()" class="btn btn-primary" type="button">Search</button>
  </form>

Ts 代码

logggForm= new FormGroup({
    userEmail: new FormControl(''),
    from: new FormControl(new Date()),
    to: new FormControl('')
  });

【问题讨论】：

欢迎来到 Stack Overflow。感谢您的提问，我很高兴您自己找到了答案。您可以为自己的问题写一个答案，这可以帮助将来遇到同样问题的其他人。

标签： angular typescript vmware-clarity

【解决方案1】：

又过了 30 分钟 我找到了一种更简单的方法来获得我想要的输出，而无需使用 DatePipe

  let formatDate = this.logggForm.value.dateFrom.split('.');
  let formattedDatefrom = formatDate[2] + '-' + formatDate[1] + '-' + formatDate[0] + 'T00:00:00';
  data.from = formattedDatefrom;

首先

this.logggForm.value.dateFrom = '15.10.2021'

然后我拆分它'。'到数组。

我能够通过使用数组得到我想要的输出。

【讨论】：

【解决方案2】：

30 分钟后。我解决了我的问题。

添加：

providers: [DatePipe]

  constructor(private datePipe: DatePipe)

   let formattedDate = this.datePipe.transform(this.logggForm.value.from, 'yyyy-dd-MMT00:00:00');

我能够得到我想要的输出。

【讨论】：