InvalidPipeArgument: '2017-12-05 05:30:00 for pipe 'DatePipe' - Safari

问题

Exception

InvalidPipeArgument: '2017-12-05 05:30:00 for pipe 'DatePipe'

Code

The following code is working fine on mac machine chrome browser but in safari it fails :

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import * as moment from 'moment';

@Pipe({
    name: 'dateCulturePipe',
})
export class dateCulturePipe implements PipeTransform {
    transform(value: string) {
        if (value) {
            value = moment.utc(value).local().format('YYYY-MM-DD HH:mm:ss');
        }

        return value;
    }
}

Use

{{ (item.Date | dateCulturePipe) | date:'dd-MMM-yyyy HH:mm' }}

Value

Date

    2018-06-01 11:39:41.880
    2018-05-25 10:39:54.597
    NULL
    2018-05-23 09:33:00.000
    2018-05-22 13:04:20.190
    2018-05-22 11:20:14.530
    2018-05-19 11:55:53.750
    2018-05-19 11:55:04.117
    2018-05-18 11:34:06.190
    2018-05-10 11:57:18.507
    2018-05-10 11:44:25.893
    2018-05-10 11:42:47.467
    2018-05-10 11:42:21.197
    2018-05-10 11:41:46.363
    2018-05-10 11:40:42.483
    NULL
    NULL
    2018-05-04 11:04:00.000
    NULL
    2018-05-03 11:04:00.000
    NULL

Checked - Don't know where to change

https://github.com/angular/angular/issues/12334

回答1:

You can refer this particular issue

Invalid argument for pipe 'DatePipe' - Safari cannot parse Date offsets

To fix this, Replace your string

'2017-11-02 00:00:00.000'.replace(/\s/g, "T")

回答2:

I have also faced the same issue, I have corrected by providing T and Z in the date format to API response. Previously from backend, it's coming like that 2017-07-28 12:02:14 and now from backend, I changed to 2017-07-28T12:02:14.000Z format, if from backend you can't change then from the frontend use the replace method and then add the 'Z'

'2017-11-02 00:00:00.000'.replace(/\s/g, "T") + 'Z'

Final result will be:- 2017-11-02T00:00:00.000Z

2nd Method:- Split the string from the space and then add the 'T' and concat the other part and in the last add the 'Z'.

let dateParts = '2017-11-02 00:00:00.000'.split(' ');
console.log(dateParts[0]+'T'+dateParts[1]+'Z')

Now in the front end side, show whatever the format you want and the important point is that if you want to show UTC format, then angular pipe won't provide you, you've to do yourself. Example if its "2017-11-02T12:00:00.000Z)

{{mydate | date:'h:mm a'}} -> 5:30 PM -> according to local timezone

If you want lowercase, then add the lowercase pipe

{{mydate | date:'h:mm a' | lowercase}}-> 5:30 pm -> according to local timezone

And if you want to show the UTC date as it is without changing to local time then

HTML File

{{showUTCDate(mydate) | date: 'h:mm a' | lowercase}} -> Output 12:00 pm

TS File

  showUTCDate(utcdate){
    let date = new Date(utcdate);
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
  }

You can use change this date by using pipe too.

回答3:

Safari browser throws an error when the Date is in the format '2017-11-02 00:00:00.000'. It requires the date in the T format i.e. '2017-11-02T00:00:00' instead of the space between the date and time.

The above solution with the regex to match the space and replace it with "T" will work and the issue should be resolved on Safari.

来源：https://stackoverflow.com/questions/50653248/invalidpipeargument-2017-12-05-053000-for-pipe-datepipe-safari

标签

angular

safari

momentjs