Angular2+ How to display milliseconds from date?

Question

I was using a custom pipe for displaying time, and now I tried to change it so that I could also display milliseconds:

{{log.LogDate|jsonDate|date:'dd.MM.yyyy &nbsp; HH:mm:ss.sss'}}

The pipe itself:

if (typeof (value) === 'string') {
        if (value.includes('/Date('))
            return  new Date(parseInt(value.substr(6)));
    }
    return value;

However, milliseconds have the value of seconds:

log.LogDate: 2017-05-08T15:45:38.2527293+ 02:00

Output from pipe: 08.05.2017 15:45:38.38

Full jsonDate pipe(no format): 2017-05-08T15:45:38.2527293+02:00

I am new to Javascript, and I am not sure if this is an Javascript or an Angular issue, however, I would like it to work inside Angular. Is it possible to do this using pipes, or is there another/better way to do this?

Could you please add more data to the example? `log.LogDate` value and full `jsonDate` pipe listing. — borkovski, May 08 '17 at 13:21
Thank you for the comment, I have updated the question with the data in question. — Schattenjäger, May 08 '17 at 13:52

score 16 · Accepted Answer · answered Nov 28 '17 at 10:24

Since angular 5 you can use SSS to add milliseconds to your date.
See https://angular.io/api/common/DatePipe

So your example would look like

{{log.LogDate|jsonDate|date:'dd.MM.yyyy &nbsp; HH:mm:ss.SSS'}}

Changelog for angular 5:
- [...]
- fractional seconds are now supported with the format S to SSS.
- [...]

score 7 · Answer 2 · answered May 09 '17 at 07:01

It's an Angular issue. AngularJS supports milliseconds, but Angular (2+) does not (GH issue). You can very well drop the date pipe and use only your custom one for this task. Your example however doesn't seem to handle dates very well. Without going into details I suggest you use some external library to do the formatting for you inside your pipe. Otherwise it would be a lot of effort for little reward. My personal weapon of choice is Moment.js After importing it correctly you would simply use:

moment(value).format('DD.MM.YYYY HH:mm:ss.SSS');

If you want a dirty way out of this without importing external libraries, you could use Angular date pipe as it is (with seconds only) and then pipe it to add milliseconds on your own.

score 0 · Answer 3 · answered Sep 04 '17 at 12:39

Another possibility is to stay with angulars pipe and extract the milliseconds via javascript-method:

{{ Datetime | date:'dd.MM.yyyy HH:mm:ss' }}.{{ getMillies(Datetime) }}

----

public getMillies(input: Date): number
{
    return new Date(input).getMilliseconds();
}

With Angular 5, a new Date-Pipe is in progress, to support M

Angular2+ How to display milliseconds from date?

3 Answers3