How to add 48 hours or 2 days to a Date timestamp in html

Question

I want to add to a Date timestamp 48 hours or 2 Days in html.

E.g. 04.10.2019 + 2days = 06.10.2019. I don't know if this is possible with html.

Here is that part of my code:

<tr *ngFor="let date of dateValues">
        <td>{{date.startDate | date:'dd.MM.yyyy'}}</td>
        <td>{{date.endDate | date:'dd.MM.yyyy'}}</td>
</tr>

The date.startDate is of type Date.

The date.endDate is of type Date too.

I'm want to do something like this:

 <tr *ngFor="let date of dateValues">
            <td>{{date.startDate | date:'dd.MM.yyyy'}}</td>
            <td>{{date.endDate =(date.startDate + 2days) |date:'dd.MM.yyyy'}}</td>
 </tr>

I would appreciate any suggestion of how to do this, or any source to read about it.

Why are you not doing this in the component (instead of the template)? — Igor, Oct 02 '19 at 15:25
@Igor I thought maybe there is a short way to do it in html. Thanks for the suggestion :) — dernor00, Oct 02 '19 at 15:29

kshetline · Accepted Answer · 2019-10-02T16:29:32.863

Well, it wouldn't be "in HTML" that you would accomplish this, it would be something you do in TypeScript/JavaScript. (That stuff you see inside the {{...}} is Angular-modified JavaScript being executed, not HTML.)

And as @Igor mentioned in a comment, it's better to do this inside the component, not try to do it in the template, because doing this right is a bit more code than you'd want to stick into a template.

The quick-and-dirty-way to add two days to a date would be like this:

let twoDaysLater = new Date(originalDate.getTime() + 2 * 86400 * 1000);

That works well in most cases, but can be off by an hour (and possibly cause a shift of a day if the time is near midnight) if Daylight Saving Time starts or ends within that two day span.

thank you, I will do it in the TypeScript file :) – dernor00 Oct 02 '19 at 15:39 — dernor00, Oct 02 '19 at 15:39

How to add 48 hours or 2 days to a Date timestamp in html

1 Answers1