javascript - InvalidPipeArgument: 'Unable to convert "2018-01-01-12:12:12:123456" into a date'

admin管理员组

文章数量:1309930

 <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.

 <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.

• javascript
• angular
• typescript
• ecmascript-6
• date-pipe

Share Improve this question Follow edited Mar 11, 2019 at 9:30 TheParam 10.6k44 gold badges4343 silver badges5454 bronze badges asked Mar 11, 2019 at 9:12 sm770sm770 12311 gold badge33 silver badges1212 bronze badges 12

• 1 You should convert a value to Date where you obtain them from backend or write a Pipe that will be converting this for you. – Hakier Commented Mar 11, 2019 at 9:14
• Are you trying to concatenate texts? – rcanpahali Commented Mar 11, 2019 at 9:14
• @Hakier ok i will try for the pipe approach – sm770 Commented Mar 11, 2019 at 9:18
• @shadowman_93 no..using && for handling null values in the array – sm770 Commented Mar 11, 2019 at 9:19
• modifiedTimestamp will be your date right? – TheParam Commented Mar 11, 2019 at 9:20

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 2

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.ponent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.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.ponent.html

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

Solution on stackblitz

Hope this will help!

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())

本文标签：