es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Angular MatDatePicker retorna una fecha incorrecta en ET (zona horaria del este).

06 Aug, 2023 Programación

Configuré mi zona horaria del sistema en ET y en el selector de fecha de Mat, la fecha cambia a partir de la fecha actual. Por favor, ayúdame a resolver este problema.

Imagen

<div *ngif="startDateWidget" class="filter-field date-field">
   <label class="labeltext">Fecha de inicio   {{startOfMonth}}</label>
   <mat-form-field color="accent" appearance="fill">
      <input matinput="" [matdatepicker]="startDate" [(ngmodel)]="startOfMonth" (datechange)="filterChange('change', startDateId, $event.value)" [max]="endDateValue">
      <mat-datepicker-toggle matsuffix="" [for]="startDate"></mat-datepicker-toggle>
      <mat-datepicker #startdate="" color="primary"></mat-datepicker>
   </mat-form-field>
</div>

¡Se agradece cualquier solución!

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es probablemente causado por el hecho de que MatDatePicker usa la zona horaria del sistema para establecer las fechas, mientras que la zona horaria del sistema se establece en Eastern Time (ET). Para solucionar este problema, puedes establecer la zona horaria en MatDatePicker para que sea la misma que la zona horaria del servidor.

    Una forma de hacer esto es usar el módulo DateAdapter que viene con Angular Material. Puedes crear un adaptador personalizado que establezca la zona horaria en la zona horaria del servidor. Aquí tienes un ejemplo:

    import { NativeDateAdapter } from '@angular/material/core';
import { formatDate } from '@angular/common';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    date = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(),
      date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
    return formatDate(date, displayFormat, this.locale);
  }
}

    Luego puedes proporcionar este adaptador personalizado en tu módulo de aplicación:

    import { NgModule } from '@angular/core';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
import { CustomDateAdapter } from './custom-date-adapter';

@NgModule({
  // ...
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-US' },
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
  ],
  // ...
})
export class AppModule {}

    Ten en cuenta que tendrás que cambiar el useValue del proveedor MAT_DATE_LOCALE para que coincida con la zona horaria del servidor. Además, necesitarás importar MAT_MOMENT_DATE_FORMATS de @angular/material-moment-adapter si estás utilizando Moment.js en lugar de la implementación de fecha predeterminada.

    Con estos cambios, el MatDatePicker debería mostrar ahora las fechas correctas basadas en la zona horaria del servidor, independientemente de la zona horaria del sistema.

Comments are closed.