Datumsformat für Material-Datumsauswahl in Winkel 2 einstellen

Ich bin neu in 'angular2' und 'angular js material'. Ich verwende Material-Datumsauswahl in meinem Projekt.Datumsformat für Material-Datumsauswahl in Winkel 2 einstellen

Das ist mein der Datumsauswahl Code

<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

Es wird Anzeige im Browser sein, wie unten dargestellt.

Meine Sorge ist, Datumsformat Ausgabe. Wie 27 das Datumsformat von 2017.04.27 bis April setzen 2017.

Quelle

2017-04-27 Libin C Jacob

Welchen Datypicker verwenden Sie? Kannst du es verlinken? Wenn Sie angular-material (angular 1.x) verwenden, siehe ['$ mdDateLocaleProvider'] (https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider) – VincenzoC

@VincenzoC Dies ist der Link, den ich verwende https://www.pincer.io/npm/libraries/angular2-material-datepicker –

Hatten Sie versucht, mit der Option "dateFormat"? Sie können versuchen, 'dateFormat =" MMMM DD YYYY "' zu Ihrem ' – VincenzoC

können Sie dateFormat Option ein MMMM DD YYYY Token angeben, wo:

MMMM Name Monat ist
DD ist Tag der Monat
YYYY ist das Jahr

wie in den momentjs docs angegeben.

Ihr Code wird wie folgt sein:

<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

Quelle

2017-04-27 09:49:33 VincenzoC

Ich versuchte dies, aber nicht für mich arbeiten .. –

@LibinCJacob Sorry darüber, funktioniert die' Platzhalter'-Option? Haben Sie versucht, '[dateFormat] =" MMMM DD YYYY "' (eckige Klammern) zu verwenden? – VincenzoC

Sorry @VincenzoC .... Es funktioniert nicht –

Werkstoff Datumsauswahl Moment wird mit dem Datum zu formatieren, so dass, wenn Sie nur das Muster, das Moment geben akzeptieren Sie das Datum erhalten können formatiert, wie Sie wollen. [dateFormat]="'LL'"

Quelle

2017-04-27 16:43:40

wie man Ausgabe von datepicker von iso zu etwas anderem ändert, lässt Tag toLocaleString() –

In Winkel 2 für md picker, können Sie das Datumsformat wie unten ändern:

eine Komponente erstellen, die NativeDateAdapter erweitert:

import { Component, OnInit } from '@angular/core'; 
import { NativeDateAdapter } from '@angular/material'; 
export class DateAdapterComponent extends NativeDateAdapter { 
    format(date: Date, displayFormat: Object): string { 
     let day = date.getDate(); 
     let month = date.getMonth(); 
     let year = date.getFullYear(); 

     if (displayFormat == "input") { 
      return this._toString(month) + ' '+ this._to2digit(day) + ',' + year; 
     } else { 
      return this._toString(month) + ' ' + year; 
     } 
    } 

    private _to2digit(n: number) { 
     return ('00' + n).slice(-2); 
    } 

    private _toString(n: number) { 
     let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
     return month[n]; 
    } 
}

hinzufügen Datumsformat Konstante in Ihrer App-Modul:

const MY_DATE_FORMATS:MdDateFormats = { 
    parse: { 
     dateInput: {month: 'short', year: 'numeric', day: 'numeric'} 
    }, 
    display: { 
     dateInput: 'input', 
     monthYearLabel: {year: 'numeric', month: 'short'}, 
     dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'}, 
     monthYearA11yLabel: {year: 'numeric', month: 'long'}, 
    } 
};

und Anbieter, Datum Adapter und Datum hinzufügen Formate:

providers: [ {provide: DateAdapter, useClass: DateAdapterComponent}, 
       {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],

Quelle

2017-09-20 12:38:07 Nithya

Datumsformat für Material-Datumsauswahl in Winkel 2 einstellen

Antwort

Verwandte Themen