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

I am developing an angular application with clarity design.

There is a datepicker inside the form tag. The date value from there is 10.15.2021. but the format I need is 2021-10-15T17:56:30.728Z.

The clarity design official document says if you get [(clrDate)]="date" like this, it will output 2021-10-15T17:56:30.728Z, but I don't want to use ngmodel. I am using reactive form.

How can I format date information from formcontrol. codes below

<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="[email protected]" 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 code

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

CodePudding user response：

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;

first of all

this.logggForm.value.dateFrom = '15.10.2021'

then i split it '.' to array.

I was able to get the output I wanted by using the array.

CodePudding user response：

30 min later. I solved my question.

Add:

providers: [DatePipe]

  constructor(private datePipe: DatePipe)

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

I was able to get the output I wanted.