Eckiges Material 5 - Wie man das Datum in Mat-Datepicker einstellt

Wie kann ich Mat-Datepicker Datum im MM/TT/YYYY Format anpassen?Eckiges Material 5 - Wie man das Datum in Mat-Datepicker einstellt

ich folgende folgende Konfiguration bin mit:

HTML:

<mat-form-field> 
    <input matInput [matDatepicker]="picker" placeholder="Choose a date"> 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
    <mat-datepicker #picker></mat-datepicker> 
</mat-form-field>

TS:

import {Component} from '@angular/core'; 

/** @title Basic datepicker */ 
@Component({ 
    selector: 'datepicker-overview-example', 
    templateUrl: 'datepicker-overview-example.html', 
    styleUrls: ['datepicker-overview-example.css'], 
}) 
export class DatepickerOverviewExample {}

Wenn ich die Form Wert drucken es gibt mir folgende Ausgabe:

Sun 31. Dezember 2017 00:00:00 GMT + 0530 (IST)

Ich erwarte Format in MM/DD/YYYY.

habe ich versucht, diese Konfiguration: https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

Aber es nicht für mich zu arbeiten. Ich verwende Standard MatNativeDateModule (Nicht Moment js)

Quelle

2017-12-31 Sahil Purav

MatNativeDateModule speichern das Datum als Date-Objekt. Ein Date-Objekt hat kein Format. Es handelt sich um ein Objekt, das seit 1970 eine Reihe von Millis umhüllt. Aber Sie können es beispielsweise so formatieren, wie Sie möchten, zum Beispiel mit der Datums-Pipe. –

Versuchen Sie Folgendes: https://stackoverflow.com/questions/48396025/how-to-customize-date-in-mat-datepicker-to-2017-11-20t112300-angular-mater/48804115#48804115 –

Sie können Sie das Datum Rohr wie folgt verwenden,

<input mdInput placeholder="Title" [ngModel]="mydate | date:'MM-dd-yyyy'">

DEMO

Quelle

2017-12-31 16:34:36 Sajeetharan

Vielen Dank. Wenn ich [ngMode] = "mydate | date: 'MM-dd-yyyy'" hinzufüge, heißt es. Property 'mydate' existiert nicht auf Typ 'FormDateComponent' irgendeine Idee, was hier falsch ist? –

Ich habe Variable Mydate hier verwendet, müssen Sie mit Ihrer Modellvariable ersetzen. markieren, wenn die Antwort geholfen – Sajeetharan

Danke für die Antwort. Ich habe es herausgefunden. Es funktioniert perfekt :) –

Eckiges Material 5 - Wie man das Datum in Mat-Datepicker einstellt

Antwort

Verwandte Themen