Soy nuevo en 'angular2' y 'angular js material'. Estoy usando material-datepicker en mi proyecto.
Este es mi código selector de fecha
<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
Se mostrará en el navegador como se muestra a continuación.
Mi preocupación es el problema del formato de fecha. Cómo configurar el formato de fecha del 27/04/2017 al 27 de abril de 2017.
Puede usar la opción dateFormat
y especificar tokens MMMM DD YYYY
donde:
MMMM
es el nombre del mesDD
es el día del mesYYYY
es el añocomo se indica en los documentos de momentjs .
Su código será como el siguiente:
<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
El selector de fecha de material está utilizando el momento para formatear la fecha, por lo que si solo le da al patrón ese momento, puede obtener el formato de fecha que desee. [dateFormat]="'LL'"
En angular 2 para md datepicker, puede cambiar el formato de fecha de la siguiente manera:
Cree un componente que amplíe NativeDateAdapter:
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]; } }
Agregue una constante de formato de fecha en el módulo de su aplicación:
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'}, } };
y en proveedor, agregue adaptador de fecha y formatos de fecha:
providers: [ {provide: DateAdapter, useClass: DateAdapterComponent}, {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],