Estoy usando mat datepicker y al momento de mostrar la fecha que obtengo del servicio, le quita un día
esta es la fecha que muestra la base que es de tipo Date
y este es mi formulario
<button mat-button (click)="guardar()">Guardar</button>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="idControl">
<th mat-header-cell *matHeaderCellDef> ID. </th>
<td mat-cell *matCellDef="let element"> {{element.idControl}} </td>
</ng-container>
<ng-container matColumnDef="cveEstado">
<th mat-header-cell *matHeaderCellDef> ESTADO </th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-select [(value)]="element.cveEstado" (selectionChange)="cambiarEstado($event.value, element)">
<mat-option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado"
[ngClass]="{'text-red':estatus.cveEstado=='ERR', 'text-blue':estatus.cveEstado=='INP'}">
{{estatus.descripcion}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="comentario">
<th mat-header-cell *matHeaderCellDef> COMENTARIO </th>
<td mat-cell *matCellDef="let element">
<mat-form-field>
<input matInput [value]="element.comentario" (keyup)="changeValue($event.target)">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="horaInicio">
<th mat-header-cell *matHeaderCellDef> HORA </th>
<td mat-cell *matCellDef="let element"> {{element.horaInicio}} </td>
</ng-container>
<ng-container matColumnDef="fechaRegistro">
<th mat-header-cell *matHeaderCellDef> FECHAREGISTRO </th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" [value]="element.fechaRegistro">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
y asi es como se muestra en la tabla, como le puedo dar el formato para que salga como en la base y que no me quite un día? además como le puedo hacer para que el calendario solo aparezca en las filas donde si tiene datos , y no se pinte en todas, y como recuperar el valor de la fecha cuando se seleccione otra
este es mi component.ts, donde uso el this.dataAdapter.setLocale('es-MX');
import { Component } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'prueba-angular-material';
displayedColumns: string[] = ['idControl', 'cveEstado', 'comentario', 'horaInicio','fechaRegistro'];
estadoModel: Estado[]= [];
control: Control[] = [];
estadoSeleccionado: any;
idSeleccionado: string = '';
comentIngresado: string ='';
fechaIngresada: string ='';
constructor(private controlService: ControlService, private dataAdapter: DateAdapter<Date>) {
this.dataAdapter.setLocale('es-MX');
}
ngOnInit(): void {
this.obtenerLista();
this.obtenerListaEstados();
}
dataSource: any;
private obtenerLista() {
this.controlService.obtenerLista().subscribe(response => {
this.control = response.data;
this.dataSource = new MatTableDataSource(this.control);
})
}
private obtenerListaEstados() {
this.controlService.obtenerEstados().subscribe(response => {
this.estadoModel = response.data;
})
}
cambiarEstado(valor: Event, row: any) {
this.estadoSeleccionado = valor;
this.idSeleccionado = row.idControl;
console.log(" ID SELECC " +this.idSeleccionado );
console.log(" ESTADO SELECC " +this.estadoSeleccionado );
}
changeValue(e: any) {
console.log(" INPUT " +e.value);
this.comentIngresado = e.value;
this.fechaIngresada = e.value
}
guardar(){
if(this.comentIngresado == "" && this.idSeleccionado ==""){
alert("No se han modificado campos");
}else{
console.log(" ENTRA ELSE " +this.comentIngresado + " "+this.idSeleccionado);
}
}
}