CODEWITHSUNDEEP
htmlangulartypescript
user12206552
user12206552

Reputation:

Getting MatDatePicker to display as format 01/01/2010

I currently have a form that includes a calendar date and always returns "Tue Dec 10 2019 00:00:00 GMT-0800 (Pacific Standard Time)" date format however I am trying to get 01/01/2000 format instead as this needs to fit my backend. I have tried changing the code in provider but nothing works

app.module.ts

export const DD_MM_YYYY_Format = {
  parse: {
      dateInput: 'LL',
  },
  display: {
      dateInput: 'DD/MM/YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
  },
};

providers: [WebService,AuthService,   {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format}],

html

<form [formGroup]="witnessForm" (ngSubmit)="onSubmit()">
        <div class="form-group"> <label for="Firstname">First name</label> <input type="text" id="Firstname"
            name="Firstname" class="form-control" formControlName="Firstname"
            [ngClass]="{'error': isInvalid('Firstname')}"> </div>








        <div class="form-group"> <label for="Surname"> Surname</label> <input type="text" id="Surname" name="Surname"
            class="form-control" formControlName="Surname" [ngClass]="{'error': isInvalid('Surname')}"> </div>
        <div class="form-group"> <label for="Description">Please provide details as a witness of this accident</label>
          <textarea id="Description" rows="3" name="Description" class="form-control" formControlName="Description"
            [ngClass]="{'error': isInvalid('Description')}"></textarea> </div>

        <div class="form-group"> <label for="Date">Date of witness</label> <input [matDatepicker]="myDatepicker" id="Date" name="Date"
            class="form-control" formControlName="Date" readonly [ngClass]="{'error': isInvalid('Date')}">  <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
            <mat-datepicker #myDatepicker></mat-datepicker></div>

webservice

let postWitnessData = new FormData();

    postWitnessData.append("Firstname", witness.Firstname);
    postWitnessData.append("Surname", witness.Surname);
    postWitnessData.append("Date", witness.Date);
    postWitnessData.append("Time", witness.Time);
    postWitnessData.append("Description", witness.Description);

Upvotes: 0

Views: 158

Answers (3)

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

here is workig Demo StackBlitz Link

in your app.module.ts add this line...

import { MAT_DATE_LOCALE } from '@angular/material';

@NgModule({
    ....

     providers: [{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }]
})

Upvotes: 0

Fmerco
Fmerco

Reputation: 1206

<div class="form-group"> <label for="Date">Date of witness</label> <input [matDatepicker]="myDatepicker" id="Date" name="Date"
    class="form-control" [value]="myForm.get('Date')?.value | date:'d/M/yy'" formControlName="Date" readonly [ngClass]="{'error': isInvalid('Date')}">
        <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
    </div>

Upvotes: 0

samuel gast
samuel gast

Reputation: 372

You can use moment.js, which lets you format dates quite easily.

moment(your_date_variable).format('DD/MM/YYYY');

Upvotes: 1

Related Questions