Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date() Documentacion sobre la advertencia :moment construction falls back to js Date(),
En la aplicación puedo editar la columna fecha para esto uso un Pipe personalizado Moment
en la Vista y en el codigo compruebo que la fecha editada sea valida y si es asi hago un update de la tabla
lei la documentacion pero no puedo solucionar la advertencia le di valores iniciales de fecha en formato ISO y cambie a distintos tipos de valores iniciales para ver si se solucionaba. Tambien en el código trate de dar los formatos a moment
que según entiendo son los adecuados
La aplicacion puede editar las fechas y rechazar fechas invalidas en modo estricto pero no puedo solucionar la advertencia
La tabla contiene fechas estas se muestra adecuadamente con el Pipe el problema que genera la advertencia se da al hacer un update de la Tabla
//moment.pipe
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
@Pipe({
name: 'dateFormat'
})
export class MomentPipe implements PipeTransform {
transform(value: Date | moment.Moment, dateFormat: string): any {
return moment(value).format(dateFormat)
}
}
// app.component.ts
import { Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
import * as moment from 'moment';
import { formatDate } from "@angular/common";
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableDataSource } from '@angular/material/table';
import { MatTable } from '@angular/material/table';
export interface EMPLOYEE {
name: string;
sueldo: number;
cargo: string;
inicio: Date;
}
const juanFecha = new Date("2019-08-01T10:11:12");
//const juanFecha=moment('2014-02-27T10:00:00','D/M/YYYY').toDate()-->invalid date
console.log('Juan fecha', juanFecha)
const pedroFecha = new Date("2020-06-01T10:11:12");
const monicaFecha = new Date("2016-08-01T10:11:12.123456-0500")
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
@ViewChild(MatTable, { static: true }) tablaEmploye!: MatTable<EMPLOYEE[]>;
modiSource: EMPLOYEE[]
EMPLOYEE_DATA: EMPLOYEE[] = [
{
name: "Juan",
sueldo: 1000,
cargo: 'Gerente Sistemas',
inicio: juanFecha
},
{
name: "Pedro",
sueldo: 200,
cargo: 'Empleado',
inicio: pedroFecha
},
{
name: "Monica",
sueldo: 500,
cargo: 'Jefa Sistemas',
inicio: monicaFecha
},
]
MonicaFecha !: Date
displayedColumns: string[] = ['name', 'sueldo', 'cargo', 'inicio'];
dataSource: EMPLOYEE[]
constructor(@Inject(LOCALE_ID) private locale: string, private snackbar: MatSnackBar) {
this.MonicaFecha = monicaFecha
}
ngOnInit(): void {
let dateString = 'Thu Jul 15 2016 19:31:44 GMT+0200 (CEST)';
let dateObj = new Date(dateString);
let momentObj = moment(dateObj).toDate()
let juanFecha = momentObj
console.log('juan Fecha', juanFecha, juanFecha)
this.FirstSource()
}
date = new Date();
FirstSource() {
if (this.dataSource == undefined) {
this.dataSource = this.EMPLOYEE_DATA;
} else {
this.dataSource = this.modiSource
}
}
changeSource(newSource) {
this.dataSource = newSource;
}
UpdateFecha(objeto: any, fechaIngreso: string) {
console.log('fechaIngreso:', moment(fechaIngreso))
if (moment(fechaIngreso, 'D/M/YYYY', true).isValid()) {
this.modiSource = this.dataSource.map(obj =>
obj.name == objeto.name && fechaIngreso !== undefined ? {
...obj, inicio: moment(fechaIngreso, 'D/M/YYYY').toDate()
} : obj);
this.changeSource(this.modiSource)
console.log('this modiSource:', this.modiSource)
}
else {
this.modiSource = this.dataSource.map(obj => obj)
console.log('fechaIngreso', fechaIngreso)
let snackBar = this.snackbar.open('La Fecha del Ingreso debe ser de tipo fecha', 'fecha Ingreso', { duration: 3000 });
}
}
}
//app.componet.html
<div class="container">
<table mat-table [dataSource]="dataSource" #mytable class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="sueldo">
<th mat-header-cell *matHeaderCellDef>Sueldo</th>
<td mat-cell *matCellDef="let element"> {{element.sueldo}} </td>
</ng-container>
<ng-container matColumnDef="cargo">
<th mat-header-cell *matHeaderCellDef> Cargo </th>
<td mat-cell *matCellDef="let element"> {{element.cargo}} </td>
</ng-container>
<ng-container matColumnDef="inicio">
<th mat-header-cell *matHeaderCellDef> Inicio </th>
<td mat-cell *matCellDef="let element" [satPopoverAnchor]="p" (click)="p.open()">
{{element.inicio | dateFormat: 'D/M/YYYY'}}
<sat-popover #p [hasBackdrop]="true" xAlign="start" yAlign="start"
(closed)="UpdateFecha(element, $event)">
<inline-edit [value]="element?.inicio | dateFormat: 'D/M/YYYY'"></inline-edit>
</sat-popover>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns">
</tr>
</table>
</div>
la advertencia la genera el update de la tabla
. La foto es solo para mostrar el resultado del codigo si parte de este se muestra en la foto es porque uso dos pantallas
la tabla que contiene fechas se muestra adecuadamente con el Pipe el problema que genera la advertencia se da al hacer un update de la tabla
