ERROR Error: InvalidPipeArgument: "12-01-2020 - 12-02-2020' to a date' for pipe 'DatePipe'

Question

I am trying to concatenate two dates and assigning to variable but it is throwing an error ERROR Error: InvalidPipeArgument: 'Unable to convert “12-01-2020 - 13-02-2020” into a date' for pipe 'DatePipe'.where I am going wrong?

dates which I am getting from backend is projectStartDate: "2020-12-21T13:55:00.000+00:00".I am converting it to 12-01-2020 / timestamp after that concatenating both and assigning to projectduration value.

            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 ;

Are you sure that `response.projectStartDate` is just one date? Like `12-01-2020` — Leandro Matilla, Feb 17 '21 at 04:32
it is two dates after after concatenation.single date works fine — Shri Raksha Dk, Feb 17 '21 at 05:19
`projectStartDate: "2020-12-21T13:55:00.000+00:00". I am converting it to 12-01-2020 / timestamp` is not clear to me. — Pinaki, Feb 17 '21 at 09:32

Tim · Answer 1 · 2021-02-17T05:22:49.930

locale is the fourth argument of the DatePipe transform and timezone is the third argument. Currently you have the locale as the third argument. I'd probably configure your locale like this (and the date pipe will automatically work for your locale without specifying):

Missing locale data for the locale "XXX" with angular

transform takes either a javascript date or an ISO date string so I'm guessing your dates (projectStartDate, projectEndDate) are strings that aren't in the ISO format? The error message implies that one of those fields has the entire value of 12-01-2020 - 13-02-2020

sample code with ISO date string

  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}`);
  }

Sample code with javascript date

  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}`);
  }

If your dates are strings in a dd-MM-yyyy format, you can parse them with a library like luxon:

npm i luxon

And import

import { DateTime } from 'luxon';

And parse

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

As a final note it's a little funny to put the dates in an ISO date format (yyyy-MM-dd) and then format them in the same format. The pipe makes more sense, particularly with you app locale set, if you want to use formats such as mediumDate (the default) which might display 12 ene. 2020

score 0 · Answer 2 · answered Feb 17 '21 at 04:37

The Date format: DD-MM-YYYY is invalid.

You can try using :

new Date("12-01-2020")

It will give Invalid Date in chrome dev tools.

Solution

You can change the date format to MM-DD-YYYY and then pass it to 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');

I tried still getting this error .[FormsUI] Error: InvalidPipeArgument: 'Unable to convert "2020-12-21-2020-12-21" into a date' for pipe 'DatePipe'.Thing is projectduration field is not taking two dates . — Shri Raksha Dk, Feb 17 '21 at 05:41

ERROR Error: InvalidPipeArgument: "12-01-2020 - 12-02-2020' to a date' for pipe 'DatePipe'

2 Answers2