0
153
VistasDar formato a la fecha en forma reactiva
Actualmente muestra el 4/1/2022, debería mostrar el 04/01/2022 (debe estar en este formato), la pregunta es, ¿hay alguna manera de que podamos lograr este formato usando los formularios reactivos basados en mi formulario modelo de muestra a continuación? ? Gracias.
¿Cómo lo formateamos desde aquí transactionStartDate: [this.model.transactionStartDate || nueva fecha()], ? ¿Se requiere una herramienta fns de fecha?
#código HTML
<mat-form-field appearance="fill" class="transaction-control-filter" fxFlex="100"> <mat-label class="transaction-detail-header-label">Transaction Start Date</mat-label> <input matInput [matDatepicker]="pickerStart" formControlName="transactionStartDate"> <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle> <mat-datepicker #pickerStart class="transaction-detail-header-label"></mat-datepicker> </mat-form-field>código #ts
private modelForm(): FormGroup { transactionStartDate: [this.model.transactionStartDate || new Date()], }); }1 Respuestas
Responde la pregunta0
De acuerdo con Angular Material , puede usar sus propios formatos de fecha, puede importar NativeDateModule o MomentDateModule (usa Moment.Js ).
Ejemplo:
en app.module.ts
//import needed modules import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter'; import { MAT_DATE_FORMATS, DateAdapter} from '@angular/material-moment-adapter'; //create your own formats export const DateFormats = { parse: { dateInput: ['D/M/YYYY'] //D = Days, M = Months, Y = Years. you can change the input format }, display: { dateInput: 'DD/MM/YYYY', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', } }; //add it to your providers .. providers: [ ..., { provide: DateAdapter, useClass: MomentDateAdapter}, { provide: MAT_DATE_FORMATS, useValue: DateFormats }, ... ]Por supuesto que puedes modificar los formatos como desees. ¡El código anterior no está probado! Asegúrese de tener conocimientos básicos sobre el formateo de Moment.js