0

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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

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);
    }
    
  }
}
2
  • 1
    Tal vez por la zona horaria. La fecha que muestra la DB estará en una zona horaria y la que muestra tu vista estará en otra zona horaria. Commented el 28 abr. 2023 a las 20:32
  • Lo mismo, si el campo en BD no tiene zona horaria y lo guarda en la zona horaria del servidor de BD, va a verse todo mal cuando lo consultes y lo pintes en el navegador, que por defecto usa la zona horaria de la terminal (a menos que alguna librería en tu frontend ponga oootro estándar). No asumas ;)
    – Alfabravo
    Commented el 28 abr. 2023 a las 20:57

1 respuesta 1

0

Yo le sume un día al darle a aceptar (para que el usuario no viese nada) con este código.

this.dia =  new Date(this.form.value.fechaNacimiento);
this.dia = new Date( this.dia.setDate(this.dia.getDate() +1));
this.form.patchValue({
  fechaNacimiento: new Date(this.dia)
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.