typescript - Angular Material 2 DatePicker, ändra visningsformat dynamiskt

Jag använder Angular 2 Materials DatePicker-komponent här, och jag vill kunna dynamiskt ställa in visningsformatet (t.ex. ÅÅÅÅ-MM-DD eller DD-MM-ÅÅÅÅ, etc.)

Det verkar finnas ett sätt att utöka detta globalt genom att åsidosätta den använda "Date Adapter", men det fungerar inte för mig eftersom jag potentiellt behöver att olika datum- och tidsväljare har olika format. Jag kan inte ställa in det globalt. Finns det någon känd lösning för detta?

Svar #1

Du kan skapa ett annat fält som visar det formaterade datumvärdet. I din HTML skapar du ett fält för ngModel och matDatepicker, och ett annat för att visa det formaterade datumvärdet.

<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>

Här är ett fungerande exempel på Stackblitz

Relaterade artiklar