如何使用 angular 格式化清晰设计日期选择器的输出

Question

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

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

clarity design官方文档说如果这样得到[(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('')
  });

Answer 1

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

添加：

1-

providers: [DatePipe]

2-

  constructor(private datePipe: DatePipe)

3-

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

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

Answer 2

after another 30 min I found a simpler way to get the output I want without using 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'

然后我把它拆分成'.'到数组。

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

如何使用 angular 格式化清晰设计日期选择器的输出

How can I format the output of clarity design datepicker with angular

angular

typescript

vmware-clarity

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