2

El componente MatDatePicker me devuelve las fechas con un día menos que el seleccionado. Si selecciono "11/02/2018" el formulario me devuelve: "2018-02-10T22:00:00.000Z". Llevo días buscando la solución, he seguido las instrucciones de la página oficial de Material... Y no consigo solucionarlo.

Utilizo Angular 7 ( Tambien é probado con la versión 6). Tengo un modulo "shared" con todos los componentes de material que utilizo:

Alli pretendo seleccionar el idioma de los MatDatePicket y que use fechas UTC para tratar de arreglar el problema Me selecciona el idioma correctamente pero siempre me devuelve un día menos.

mat.module.ts.

import { MatMomentDateModule, 
     MAT_MOMENT_DATE_FORMATS,
     MAT_MOMENT_DATE_ADAPTER_OPTIONS,
     MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, 
     MAT_DATE_FORMATS, 
     MAT_DATE_LOCALE } from '@angular/material/core';

.........

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
{ provide: MAT_DATE_LOCALE, useValue: 'gl'},
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

en el componente:

<mat-form-field fxFlex>
  <input matInput
        [readonly]="true"
        [matDatepicker]="ELEPRO_DATA"
        class="form-control"
        id="ELEPRO_DATA"
        formControlName="ELEPRO_DATA"
        placeholder="Data">
  <mat-datepicker-toggle 
        matSuffix 
        [for]="ELEPRO_DATA"
        *ngIf="!readOnly"></mat-datepicker-toggle>
  <mat-datepicker #ELEPRO_DATA></mat-datepicker>
</mat-form-field>

Alguien sabe que estoy haciendo mal?

7
  • cuando dices me devuelve, a que te refieres, es lo que llega al servidor o lo que muestra el compionente?
    – manu_rit
    Commented el 7 nov. 2018 a las 14:11
  • En pantalla me presenta bien la fecha, pero al formulario (es reactivo) me la envia mal. Commented el 8 nov. 2018 a las 18:16
  • tengo que implementar esto mismo estos días, comenzare a hacerlo y te comento como me va, consulta este comportamiento es siempre o sucede solo aveces.
    – manu_rit
    Commented el 9 nov. 2018 a las 13:54
  • podrias intentar usar algo como esto si no lo haz hecho aun para ver la hora correcta. moment.utc('2016-01-01').format(), cambiar la fecha por tu entrada de fechas.
    – manu_rit
    Commented el 12 nov. 2018 a las 20:00
  • que zona horaria tienes? sorry tanta pregunta, quiero entender tu problema para no tenerlo en el futuro :)
    – manu_rit
    Commented el 12 nov. 2018 a las 20:24

5 respuestas 5

1

Ese error es algo propio de javascript, cuando envía la fecha con 00:00:00 se formatea con el día anterior, aunque no entiendo si es por la zona horaria o como pasa ese detalle, recomiendo si necesitan persistir los datos o traer los datos formatearlo todo con la clase Date de javascript ya que matpicker solo utiliza funcionalidades de js para formatear fechas por lo que veo.

A mi me paso lo mismo pero al momento de persistir lo datos porque los necesitaba con dato por defecto y me mostraba el dia anterior entonces me toco algo así:

this.filtersFormGroup = this.fb.group({
  date_picker: [new Date(), Validators.required],
});

O tambien se puede con moment de esta manera

this.filtersFormGroup = this.fb.group({
  date_picker: [moment().toDate(), Validators.required],
});

Supongo que eso lo puede aplicar al contrario para tomar la fecha

0

quizas si pusieras el ejemplo completo seria mas facil replicar tu error y por que te da mal la fecha.

te dejo un ejemplo que implemente hoy y la idea es que consulte una api, revise el request que genera y todo ok. espero te sirva de ayuda, si no podemos seguir revisando. tambien uso reactive forms.

esto es un extracto del proyecto que estoy trabajando por lo que no lo pude probar de forma isolada, si esto no funciona podria crear un proyecto especial solo para la prueba. pero funciona junto al proyecto.

por lo que veo tenemos unas diferencias, probe con la opcion de UTC true y obtengo el resultado correcto tambien.

Clase

import { Moment } from 'moment';    

export interface ClienteFiltroModel {
      nombreCliente: string;
      idTipoCliente: number;
      identificacion: string;
      idTipoIdentificacion: number;
      fechaDesde: Moment;
      fechaHasta: Moment;
    }

HTML

    <mat-form-field>
      <input matInput [matDatepicker]="dpHasta" placeholder="Fecha Creación Hasta" formControlName="fechaHasta">
      <mat-datepicker-toggle matSuffix [for]="dpHasta"></mat-datepicker-toggle>
      <mat-datepicker #dpHasta ></mat-datepicker>
    </mat-form-field>

Modulo

import {
  MatDatepickerModule,
  DateAdapter,
  MAT_DATE_LOCALE,
  MAT_DATE_FORMATS
} from '@angular/material';
import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';

  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'es-CL' },
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}
]

introducir la descripción de la imagen aquí

request generado:

GET http://localhost:50652/api/clientes?nombreCliente=&idTipoCliente=&identificacion=&idTipoIdentificacion=&fechaDesde=2018-11-02T03:00:00.000Z&fechaHasta=2018-11-24T03:00:00.000Z HTTP/1.1

Actualizacion

al parecer como lo comentaste varias veces tu problema es de la zona horaria. una solucion si el offset no es un dato importante para tu formulario. es dejar este de lado de la siguiente forma.

(fecha-tipo-moment).format('LLL')

Quedo atento, Saludos!!

1
  • Me fijo que en realidad a ti te está pasando lo mismo que a mí. A tí te devuelve 2018-11-24T03:00:00.000Z cuando debería ser 2018-11-24T00:00:00.000Z. A mí me descuenta un día y me pone las 23:00--> 2018-11-11T23:00:00.000Z. Ahora mismo son las 18:26 del día 12. Seguramente depende de la zona horaria en la que estemos. Commented el 12 nov. 2018 a las 17:28
0

[manu_rit]

He copiado la configuración de tu modulo que tenía alguna pequeña diferencia con la que esta usando. Y todo funciona igual.

El proceso sucede así:

Formulario de registro nuevo, selecciono la fecha de hoy y en el input aparece correctamente, pero en el formulario aparece mal, como se ve en la imagen. introducir la descripción de la imagen aquí

Grabo el registro y si entro a editarlo me descuenta un día más, tanto en el input como en el dato del formulario. Imagen al abrir la pantalla de edición: introducir la descripción de la imagen aquí

No entiendo porqué me mete la hora 23:00, supongo que por el uso horario, pero creo que descuenta un día por esa razón.

Un saludo.

ACTUALIZACIÓN Me rindo. No he conseguido que el datePicker me devuelva bien el valor. He decidido hacer un hack antes de enviar el formulario a la base de datos y con esto funciona correctamente:

    const data = moment(this.formulario.get('DATA').value).format('YYYY-MM-DD');
    this.formulario.get('DATA').setValue(data);

7
  • de donde sacas la información que muestras en pantalla, es decir la info del objeto que muestras en el ejemplo? me muestras el comando que estas usando para eso si es consola.
    – manu_rit
    Commented el 12 nov. 2018 a las 19:28
  • y como almacenas los datos de la fecha.
    – manu_rit
    Commented el 12 nov. 2018 a las 19:35
  • Viste el comentario que te hice en el post que está al final? Creo que tambien tienes el mismo problema que yo pero no lo notas Commented el 12 nov. 2018 a las 21:06
  • yo creo que no, el horario que muestras es transformado a UTC por eso vez el 23. tengo la impresion que si es un tema de zona horaria pero quiero poder replicar tu error. jamas me va a devolver solo 0 en el tiempo por lo que te comente.
    – manu_rit
    Commented el 12 nov. 2018 a las 21:08
  • Estoy utilizando formularios reactivos. Mientras programo pongo esto en el html del componente para ver que valor tiene en cada momento: <pre>Formulario válido: {{ formulario.valid }}</pre> <pre>{{ formulario.value | json}}</pre> Commented el 12 nov. 2018 a las 21:08
0

El MatDatepicker trabaja con moment para colocar un valor por defaul debes enviar el siguiente la fechas en el siguiente formato:

"2020-07-13T00:00:00-05:00".

Para obtener ese formtato utilizo el siguiente código.

public setDate(date) {
    return moment(date).format();
}
-1

Para resolverlo puede concatenarle a la fecha la hora 0 por ejemplo

let fechaDate = new Date(fecha + ' 0:00:00');

Luego utiliza la fechaDate en el formulario:

this.type.controls['fechaformulario'].setValue(fechaDate);

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.