0
1K
Vistasdía incorrecto en el selector de fecha de material angular
Cuando selecciono una fecha, veo la fecha correcta en el campo pero, cuando guardo, el selector de fecha envía el día anterior a la fecha que he seleccionado (desfase de 3 horas). Estoy usando el formulario reactivo angular y MatMomentDateModule para el selector de fecha.
el problema está relacionado con las zonas horarias, pero solo quiero guardar la misma fecha que el usuario ingresó a la base de datos.
Código reproducido aquí: https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts
problema relacionado con esto en githup:
https://github.com/angular/material2/issues/7167
Se agradece cualquier ayuda, y creo que muchos desarrolladores necesitan una solución para esto.
3 Respuestas
Responde la pregunta0
Hace dos días, en https://github.com/angular/material2/issues/7167 , Silthus publicó su solución que anula MomentJsDataAdapter. Lo probé y funcionó a las mil maravillas desde cualquier parte del globo.
Primero agregó un MomentUtcDateAdapter que extiende MomentDateAdapter
import { Inject, Injectable, Optional } from '@angular/core'; import { MAT_DATE_LOCALE } from '@angular/material'; import { MomentDateAdapter } from '@angular/material-moment-adapter'; import { Moment } from 'moment'; import * as moment from 'moment'; @Injectable() export class MomentUtcDateAdapter extends MomentDateAdapter { constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) { super(dateLocale); } createDate(year: number, month: number, date: number): Moment { // Moment.js will create an invalid date if any of the components are out of bounds, but we // explicitly check each case so we can throw more descriptive errors. if (month < 0 || month > 11) { throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`); } if (date < 1) { throw Error(`Invalid date "${date}". Date has to be greater than 0.`); } let result = moment.utc({ year, month, date }).locale(this.locale); // If the result isn't valid, the date must have been out of bounds for this month. if (!result.isValid()) { throw Error(`Invalid date "${date}" for month with index "${month}".`); } return result; } }Y luego, en el componente AppModule, debe hacer esto:
providers: [ ... { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }, { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }, { provide: DateAdapter, useClass: MomentUtcDateAdapter }, ... ],0
Simplemente use la opción useUtc: true para MatMomentDateAdapter :
import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter'; @NgModule({ exports: [ MatMomentDateModule, // ... ], providers: [ { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } } ], }) export class CustomModule { }0
Tal vez sea útil para alguien. Es mi método de ejemplo en el que borro TimeZone OffSet de la fecha del componente
addPriceListPeriod(priceListId: number, periodDateFrom: Date) { let UTCDate = Date.UTC(periodDateFrom.getFullYear(), periodDateFrom.getMonth(), periodDateFrom.getDate()) - periodDateFrom.getTimezoneOffset(); periodDateFrom = new Date(UTCDate); const tempObject = { priceListId, fromDate: periodDateFrom } return this.httpClient.post('PriceLists/addPriceListPeriod', tempObject); }