InvalidPipeArgument: 'Unable to convert "2018-01-01-12:12:12:123456" into a date' for pipe 'DatePipe'

Question

 <td>{{suite.testSuiteAttributes && 
       suite.testSuiteAttributes.modifiedTimestamp | date: 'yyyy-MM-dd'
     }}
</td>

I want the Date format in "05-Feb-2018 11:00:00 PM CST" CST format.But getting the error:

Unable to convert "2018-01-01-12:12:12:123456" into a date' for pipe 'DatePipe

I think is due to the fact that timeStamp is not in date format..but getting only this date from backend. Please suggest.

Solution 1

I think you are getting the wrong format date from the server. You need a date in the valid format to convert it

So here is a workaround solution to your problem where I have written a myDateParser() method to convert your invalid date to valid date.

your.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  modifiedTimestamp;

 constructor(){

   // Passing unformatter date
   this.modifiedTimestamp = this.myDateParser('2018-01-01-12:12:12:123456');
 }

 /**
  * Custom Date parser

  */
  myDateParser(dateStr : string) : string {
    // 2018-01-01T12:12:12.123456; - converting valid date format like this

    let date = dateStr.substring(0, 10);
    let time = dateStr.substring(11, 19);
    let millisecond = dateStr.substring(20)

    let validDate = date + 'T' + time + '.' + millisecond;
    console.log(validDate)
    return validDate
  }
}

your.component.html

  <table>
    <tr>
     <td>{{modifiedTimestamp |  date: 'yyyy-MM-dd'}}</td>
    </tr>
   </table>

Solution on stackblitz

Hope this will help!

Solution 2

Your date "2018-01-01-12:12:12:123456" is not a valid ISO 8601 date, so it cannot be parsed by built in parser. Either use a valid date format or write a custom parser.

You can use a regex or simply use string functions like substring as demonstrated by the other answer.

The dates in Javascript will be in local timezone of browser which is the System time of user, there is no native way to create a date in a different timezone. You can create a date in UTC and use toLocaleString() to convert it to a specific timezone. Depends on whether the date sent from backend is in UTC or CT. If it is CT, then this will work only for users in CT timezone.

let result = "2018-01-01-12:12:12:123456".match(/(\d{4})-(\d{2})-(\d{2})-(\d{2}):(\d{2}):(\d{2}):(\d{3})/).map(x => parseInt(x, 10));

result.shift();

console.log(new Date(...result).toLocaleString())

Comments

[Hakier]

You should convert a value to Date where you obtain them from backend or write a Pipe that will be converting this for you.

[rcanpahali]

Are you trying to concatenate texts?

[sm770]

@Hakier ok i will try for the pipe approach

[sm770]

@shadowman_93 no..using && for handling null values in the array

[TheParam]

modifiedTimestamp will be your date right?

[sm770]

@TheParam yes it is the date..like this..2018-01-01-12:12:12:123456”

[TheParam]

date which you trying to parse is invalid date

[sm770]

@TheParam how can it be converted to a valid date??

[TheParam]

write you need to write the custom parser or ask backend to team to provide valid timestamp

[TheParam]

I have written a simple parser for you please check answer

[Ian Kemp]

Then fix your backend to provide a valid date.

[sm770]

@IanKemp ..thanks..once i get the valid date , how can i convert it into CT time zone??

[rcanpahali]

What {{suite.testSuiteAttributes && suite.testSuiteAttributes.modifiedTimestamp.toDate() | date: 'yyyy-MM-dd'}} does? It's going to return boolean typed value.

[TheParam]

buddy is he just checking the testSuiteAttributes is null or not before accessing the modifiedTimestamp

[sm770]

..this is the date i am getting from backend...so can't do anything about it...could u please brief me a bit on writing the custom parser.

[sabithpocker]

Yes, but can you explain what 123456 represent here? the millisecond part can have max 3 chars. hh:mm:ss.sss. There is no concept of millisecond greater than 999.

[sm770]

it is dummy data might be incorrect also ,,,can u please help with the pareser content considering it only three digits to get it like 05-Feb-2018 11:00:00 PM CST

[sm770]

@TheParam Thanks a lot buddy...how can i write it in the CT timeZOne also format like Am/PM?

[sm770]

@TheParam if i change the {{modifiedTimestamp | date: 'dd-MMM-yyyy hh:mm:ss.sss}} the date comes like 2018/01/01 12:12:12.1212...1212 is correct?means can we have 4 digits in miliseconds?

[TheParam]

yes date have only 3 milisecond so you can discard the last values

[TheParam]

{{modifiedTimestamp | date: 'yyyy-MM-dd h:mm a': 'CST'}} do something like please check updated stackblitz example

[testing]

What about adding Z at the end of the new date string? It works without though.