Angular Material 2 DatePicker, change display format dynamically

Question

I'm using Angular 2 Material's DatePicker component here, and I want to be able to dynamically set the display format of (i.e. YYYY-MM-DD or DD-MM-YYYY, etc.)

There seems to be a way to extend this globally by overriding the used "Date Adapter", but that doesn't work for me because I potentially need different date time pickers to have different formats. I can't set it globally. Is there any known workaround for this?

What decides which one to use between YYYY-MM-DD and DD-MM-YYYY? — Nehal
– Nehal, Commented Aug 1, 2017 at 21:21
Without getting too much into it, I'm getting a bunch of objects back from the server. Each object has a Date and a DateFormat. I want to bind them to their own DatePicker, each displayed in the format associated with it. — Carlos Rodriguez
– Carlos Rodriguez, Commented Aug 1, 2017 at 21:22
Honestly, I'd have expected there to have been a simple "dateFormat" input variable on the DatePicker component (that maybe used moment.js behind the scenes) to handle this. I was really surprised to find that that doesn't exist. — Carlos Rodriguez
– Carlos Rodriguez, Commented Aug 1, 2017 at 21:30
github.com/angular/material2/issues/5041 github.com/angular/material2/issues/5898 — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 1, 2017 at 21:40
These issues are related, but they don't address the main problem I'm asking about — Carlos Rodriguez
– Carlos Rodriguez, Commented Aug 1, 2017 at 21:56

Armen Stepanyan · Accepted Answer · 2019-10-24 13:22:18Z

4

You can create another input which will display formated date value. In your html create one input for ngModel and matDatepicker, and another one to display formatted date value.

<div style="position: relative">
  <!-- display formatted value -->
  <mat-form-field>
    <input
      matInput
      [value]="currentDate | dateFilter: dateFormat"
      [placeholder]="label"
      autocomplete="off"
    />

    <!--shadow input keep ngModel value-->
    <input
      [matDatepicker]="picker"
      [(ngModel)]="value"
      class="shadow-dateInput"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

Here is a working example on Stackblitz

answered Oct 24, 2019 at 13:22

Armen Stepanyan

1,8761 gold badge18 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Angular Material 2 DatePicker, change display format dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related