Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

932
Vistas
Establecer formato de fecha para material-datepicker en angular 2

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.

ingrese la descripción de la imagen aquí

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.

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Puede usar la opción dateFormat y especificar tokens MMMM DD YYYY donde:

  • MMMM es el nombre del mes
  • DD es el día del mes
  • YYYY es el año

como 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>
over 4 years ago · Santiago Trujillo Denunciar

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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}],
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda