CODEWITHSUNDEEP
javascriptangulartypescript
user13829188
user13829188

Reputation:

Format date in reactive form

Currently it displays 1/4/2022 , it should display 01/04/2022(it should be on this format) , the question is , is there a way we can achieve this format using the reactive forms based on my sample Model form below ? Thanks.

How do we format it from here transactionStartDate: [this.model.transactionStartDate || new Date()], ? is a date fns tool required?

enter image description here

#html code

 <mat-form-field appearance="fill" class="transaction-control-filter" fxFlex="100">
                <mat-label class="transaction-detail-header-label">Transaction Start Date</mat-label>
                <input matInput [matDatepicker]="pickerStart" formControlName="transactionStartDate">
                <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart class="transaction-detail-header-label"></mat-datepicker>
            </mat-form-field>

#ts code

private modelForm(): FormGroup {
      transactionStartDate: [this.model.transactionStartDate || new Date()],
    });
  }

Upvotes: 1

Views: 820

Answers (1)

T. Jami
T. Jami

Reputation: 1038

According to Angular Material you can use your own date formats, you can import the NativeDateModule or MomentDateModule (uses Moment.Js).

Example:

in app.module.ts

//import needed modules
import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
import { MAT_DATE_FORMATS, DateAdapter} from '@angular/material-moment-adapter';


//create your own formats
export const DateFormats = {
    parse: {
        dateInput: ['D/M/YYYY'] //D = Days, M = Months, Y = Years. you can change the input format
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    }
};


//add it to your providers
..
providers: [
    ...,
    { provide: DateAdapter, useClass: MomentDateAdapter},
    { provide: MAT_DATE_FORMATS, useValue: DateFormats },
    ...
]

Of course you can modify the formats as you wish. The code above is not tested! Make sure you have basic knowledge of Moment.js formatting

Upvotes: 1

Related Questions