Cómo cambiar el formato de salida del selector de fecha del material 2

Nuestro grupo de expertos pasados algunos días de trabajo y de recopilar de información, hemos dado con la respuesta, nuestro deseo es que te sea de utilidad para tu proyecto.

Solución:

La mejor solución sería usar ControlValueAccessor y crear un componente de entrada personalizado, esto le permitirá controlar la entrada y salida del componente.

actualizar:

Aquí está la implementación de referencia utilizando este enfoque reproducido por Moutaz-homsi

Debe crear una clase que extienda NativeDateAdapter (desde “@angular/material/core”)

Si anula la función de formato, cambiará la forma en que se muestra la fecha en la entrada después de seleccionar una fecha. La función de análisis se llama cuando edita el valor de entrada manualmente, para mostrar una fecha válida.

Consulte el segundo comentario para obtener más detalles: https://github.com/angular/material2/issues/5722

EDITAR:

No pude encontrar una manera de formatear la salida, así que envolví el componente del selector de fecha del material en un componente personalizado.

Este componente personalizado tiene un enlace bidireccional en una propiedad para obtener la fecha:
@Input() selectedValue y @Output() selectedValueChange: EventEmitter = new EventEmitter();

UN private _selectedValue; está configurado en ngInit, contendrá la fecha del selector de fecha.

Luego, en la plantilla, el elemento de entrada html datepicker tiene [(ngModel)]="_selectedValue" (dateChange)="onChange($event)"

Él onChange la función obtiene el valor del selector de fecha _selectedValuelo formatea y lo emite a selectedValueChange.

El componente final se ve así:

import  Component, OnInit, Input, Output, EventEmitter  from "@angular/core";
import 
  DateAdapter,
  NativeDateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE
 from "@angular/material/core";
import * as moment from "moment";

const CUSTOM_DATE_FORMATS = 
  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" 
  
;
const dateFormat = "YYYY-MM-DD";
// date adapter formatting material2 datepickers label when a date is selected
class AppDateAdapter extends NativeDateAdapter 
  format(date: Date, displayFormat: Object): string 
    if (displayFormat === "input") 
      return moment(date).format(dateFormat);
     else 
      return date.toDateString();
    
  

@Component(
  selector: "datepicker",
  templateUrl: "./datepicker.component.html",
  styleUrls: ["./datepicker.component.scss"],
  providers: [
     provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS ,
     provide: DateAdapter, useClass: AppDateAdapter 
  ]
)
export class DatepickerComponent implements OnInit 
  @Input() placeholder;
  @Output() onFilter: EventEmitter = new EventEmitter();
  @Input() selectedValue;
  @Output() selectedValueChange: EventEmitter = new EventEmitter();

  private _selectedValue;
  constructor() 

  ngOnInit() 
    this._selectedValue = this.selectedValue;
  

  onChange($event) 
    this.selectedValue = this.updateDate($event.value);
    this.onFilter.emit(this.selectedValue);
  

  updateDate(date) 
    let formatedDate;
    if (date !== undefined) 
      formatedDate = moment(date).format(dateFormat);
    
    this.selectedValueChange.emit(formatedDate);
    return formatedDate;
  

No estoy seguro, si ya está haciendo esto, pero encontré información que podría darle una idea de su implementación.

A partir de hoy el Angular Material Date Module admite dos formas de proporcionar un valor de fecha MatNativeDateModule y MatMomentDateModule. Él MatNativeDateModule acepta ISO 8601 formato por defecto. Pero como no quieres usar ISO formato, sugeriría usar MatMomentDateModule (Implementación de Moment.js).

Cuando usamos el MatMomentDateModule el objeto de fecha ya no es un JavaScript Date objeto pero en cambio es un Moment.js instance(aproveche los métodos disponibles para una instancia de Moment js como format()). Hay ejemplos básicos a intermedios disponibles en la página de documentos del Selector de fecha de material usando Moment.js. Además, una vez que su fecha sea una instancia de Moment.js, puede sobrescribir los métodos (formato, análisis) de MomentDateAdapter en lugar del adaptador de fecha nativo.

Reseñas y puntuaciones

Si estás de acuerdo, eres capaz de dejar un tutorial acerca de qué le añadirías a este ensayo.

---

---

Utiliza Nuestro Buscador