How Do I use Angular Date Pipe in material date picker?

Question

I am new to Angular, and I want to format my input value for my date picker, but I cannot figure out how. I want to do something like this:

    <mat-date-range-input [rangePicker]="picker">
    <input
      class="hide"
      matStartDate
      [value]="startDate | date: 'shortDate': '' "
      #dateRangeStart
      placeholder="Start date"
    />
    <input
      class="hide"
      matEndDate
      [value]="endDate | date: 'shortDate': '' "
      placeholder="End date"
      [max]="today"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"
    />
    />

Have you looked at this yet stackoverflow.com/questions/53359598/… — Levidps
– Levidps, Commented Mar 9, 2021 at 3:43

Eranki · Accepted Answer · 2021-03-09 03:44:48Z

1

Import DatePipe in .ts:

import {DatePipe} from '@angular/common';

constructor(private datePipe: DatePipe) {}

In app.module.ts, import DatePipe and add it in providers:

providers: [DatePipe]

Add the following in your dateChange function:

dateRangeChange (dateRangeStart, dateRangeEnd) {
    startDate = this.datePipe.transform(dateRangeStart, 'yyyy-MM-dd');
    endDate = this.datePipe.transform(dateRangeEnd, 'yyyy-MM-dd');
}

answered Mar 9, 2021 at 3:44

Eranki

8163 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How Do I use Angular Date Pipe in material date picker?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related