javascript - ERROR Error: InvalidPipeArgument: "12-01-2020 - 12-02-2020' a una fecha' para el pipe 'DatePipe'

Estoy intentando concatenar dos fechas y asignarlas a una variable, pero está lanzando un error ERROR Error: InvalidPipeArgument: 'No se puede convertir "12-01-2020 - 13-02-2020" en una fecha' para el pipe 'DatePipe'. ¿Dónde estoy equivocado?

Las fechas que estoy obteniendo del backend son projectStartDate: "2020-12-21T13:55:00.000+00:00". Estoy convirtiéndola a 12-01-2020/marca de tiempo y después concatenando ambas y asignándolas al valor de projectduration.

            this.startDate = this.datepipe.transform(response.projectStartDate, 'yyyy-MM-dd','es-ES');
            this.endDate = this.datepipe.transform(response.projectEndDate, 'yyyy-MM-dd','es-ES');

            response.gbRFEbean.projectDuration.value = this.startDate + "-" +this.endDate ;

Respuesta #1

El formato de fecha: DD-MM-YYYY es inválido.

Puedes intentar usando :

new Date("12-01-2020")

Dará Fecha no válida en las herramientas de desarrollo de Chrome.

Solución

Puedes cambiar el formato de fecha a MM-DD-YYYY y luego pasarlo a datepipe.transform

let date = response.projectStartDate.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2-$1-$3")
this.startDate = this.datepipe.transform(date, 'yyyy-MM-dd','es-ES');
date = response.projectEndDate.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2-$1-$3")
this.endDate = this.datepipe.transform(date , 'yyyy-MM-dd','es-ES');

Respuesta #2

locale es el cuarto argumento de la transformación DatePipe y timezone es el tercer argumento. Actualmente tienes el locale como el tercer argumento. Probablemente configuraría tu locale así (y la tubería de fecha funcionará automáticamente para tu locale sin especificarlo):

Faltan datos de localización para la localidad "XXX" con Angular

transform acepta ya sea una fecha de JavaScript o una cadena de fecha ISO, así que supongo que tus fechas (projectStartDate, projectEndDate) son cadenas que no están en el formato ISO. El mensaje de error implica que uno de esos campos tiene el valor completo de 12-01-2020 - 13-02-2020

código de ejemplo con cadena de fecha ISO

  startDate = '2020-01-12';
  endDate = '2020-02-13';

  formattedStartDate = this.datePipe.transform(this.startDate);
  formattedEndDate = this.datePipe.transform(this.endDate);

  constructor(private datePipe: DatePipe) {
    console.log(`${this.formattedStartDate} - ${this.formattedEndDate}`);
  }

Código de ejemplo con fecha de JavaScript

  startDate = new Date('2020-01-12');
  endDate = new Date('2020-02-13');

  formattedStartDate = this.datePipe.transform(this.startDate, 'yyyy-MM-dd');
  formattedEndDate = this.datePipe.transform(this.endDate, 'yyyy-MM-dd');

  constructor(private datePipe: DatePipe) {
    console.log(`${this.formattedStartDate} - ${this.formattedEndDate}`);
  }

Si tus fechas son cadenas en un formato dd-MM-yyyy, puedes analizarlas con una biblioteca como luxon:

npm i luxon

E importar

import { DateTime } from 'luxon';

Y analizar

startDate = DateTime.fromFormat("12-01-2020", "dd-MM-yyyy").toISODate();

Como nota final, es un poco gracioso poner las fechas en un formato de fecha ISO (aaaa-MM-dd) y luego formatearlas en el mismo formato. La barra vertical tiene más sentido, particularmente con la configuración de la localidad de tu aplicación, si deseas usar formatos como mediumDate (el predeterminado) que podría mostrar 12 ene. 2020