Convert a mat-datepicker into a String

Question

I'm trying to have a reactive form in which there is some dates that are entered by the user using mat-datepicker. The problem I face is that the output of the mat-datepicker is a moment object containing the date. I want to get the date in a String (for example : "YYYY-MM-DD") and not an object.

Currently, the html template of my form component looks like that :

<form [formGroup]="myForm">
    <mat-form-field>
        <mat-label>Date d'expiration</mat-label>
        <input matInput [matDatepicker]="picker" formControlName="expireDate">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</form>

And, my component looks like that :

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'

declare var require: any
const moment = require('moment');
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit{
  myForm : FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit(): void {
    this.myForm =  this.fb.group({
      expireDate: [moment(),[
        Validators.required,
      ]],
    });
  }
}

Thanks in advance!

Chiranjaya Denuwan · Accepted Answer · 2021-07-26T19:08:52.153

HTML

<form [formGroup]="myForm">
  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="expireDate" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</form>

TS

Assign value to expiredate in formgroup

 changeDatePicker(): any {
        this.myForm.value.expireDate = moment(this.myForm.value.expireDate).format('YYYY-MM-DD');
      }

For Multiple Date Pickers

HTML

<form [formGroup]="myForm">
  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="expireDate" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker1" formControlName="expireDate2" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</form>

TS

myForm = this.fb.group({
    expireDate: ['', Validators.required],
    expireDate2: ['', Validators.required],
  });

changeDatePicker(): any {
    this.myForm.value.expireDate = (moment(this.myForm.value.expireDate).format('YYYY-MM-DD'));
    this.myForm.value.expireDate2 = (moment(this.myForm.value.expireDate2).format('YYYY-MM-DD'));
  }

Thanks, I nearly did the same things, the only difference is `this.myForm.controls.expireDate.setValue(moment(this.myForm.value.expireDate).format('YYYY-MM-DD'));` and it works :) — Théophile Wallez, Jul 26 '21 at 18:44
I have one more question if you don't mind, what if I have multiple datepickers and that I want to apply this method to all the controls which are dates ? I tried calling my method with the control name as an argument but it it didn't work. Do you know any way of doing this? — Théophile Wallez, Jul 26 '21 at 18:48

score 1 · Answer 2 · answered Jul 26 '21 at 16:36

1

You can format the moment date object like this example:

const currentDate = moment();
moment(currentDate).format('YYYY-MM-DD');

answered Jul 26 '21 at 16:36

Amine Safi

255
4
8

Hi and thanks for your reply, I'm not sure to understand what I should exactly do here. I have expireDate which contains the moment Object. Do I need to call a method to convert it to a String ? And where should I put the code you sended? I tried to paste it after : `const moment = require('moment');` but it didn't expireDate is still an object and not a String :/ – Théophile Wallez Jul 26 '21 at 16:43
@theophileWall, by defect a mat-datepicker mannage **or** "object Date" **or** moment. Amine Say you that, before send to your "service" you can pass as argument the string. some like `submit(dataForm){ if {dataForm.valid){ const data={...dataForm.value, expireDate:moment(dataForm.value.expireDate).format('YYYY-MM-DD")}; this.myservice.send(data)}}` – Eliseo Jul 26 '21 at 16:53

Convert a mat-datepicker into a String

2 Answers2