Angular Date Pipe Printing Wrong Date After Transforming Original Date Value

Question

I am using Angular's date pipe in my Angular 2 app in order to format the dates in a more human-friendly format. I am able to pull in dates from the API, and edit and save those dates to the API successfully. However, I'm running into an issue where the date pipe is transforming the date incorrectly - in terms of what actually gets displayed.

To clarify, if I print the raw date to the screen, it's correct. And when I edit the value that's been passed through the date pipe, the correct date gets saved. However, right after I make the edit, the transformed date value changes again (not in terms of what gets saved, just in terms of what's shown in the view) -- and it ends up being slightly off, usually by one day or so. So if I edit the value to be 09/25/2010, that'll get saved to the database, but what shows in the view is 09/24/2010. So it looks like maybe some sort of default as to timezone is causing an issue?

Here's what my view code looks like (I'll first list the date value passed through the date pipe, and then the same value, but not passed through the date pipe) for dob - date of birth:

<!-- DATE PASSED THROUGH DATE PIPE -->
    <input class="app-input" [ngModel]="member.dob | date:'MM/dd/yyyy'"
        (ngModelChange)="member.dob=$event" name="inputField" type="text" /> 

<!-- RAW VALUE PRINTED TO SCREEN -->
    <input class="app-input" [ngModel]="member.dob" 
        (ngModelChange)="member.dob=$event" name="inputField" type="text" />

This is what ends up being printed to the screen for the code above:

So you'll notice the transformed value is off by one day. What can I add here to ensure the correct transformed value gets printed to the screen after being passed through the date pipe?

Selfregulating

Answer 1

Issue is not with pipe, it is when you convert it into string. And this is because of your time zone. I used below approach to get correct value:

>d = new Date();
Tue Jan 09 2018 00:08:38 GMT+0530 (India Standard Time)
>d.toISOString()
"2018-01-08T18:38:38.752Z"
>d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
1515456518752
>d
Tue Jan 09 2018 05:38:38 GMT+0530 (India Standard Time)
>d.toISOString()
"2018-01-09T00:08:38.752Z"

Convert date as d.setMinutes(d.getMinutes() - d.getTimezoneOffset())

Assurance

It makes sense that this is the issue. I'm surprised Angular doesn't have some way of compensating for the timezone issue, via an additional parameter added to the pipe, or something like that. – Selfregulating

Did you calculate this timezoneOffset() on the front-end or back-end? – Selfregulating

I think issue is not with pipe, it is when you convert date into string. – Assurance

So that's probably something to handle on the backend then. – Selfregulating

If you want to edit your answer to note that the issue is not with the pipe, but in converting a date into a string, I'll go ahead and mark it as correct. – Selfregulating

Answer 2

I think you should check you local timezone settings in angular. Pipe use it when convert a date.

Endless

Answer 3

When you print your date it displays 2019-01-17T00:00:00Z

Z - here implies timezone. Try avoiding this before date Pipe gets executed.

{{ getFormattedDate(originalDate) | date }} 
getFormattedDate(originalDate) {
    return originalDate.toISOString().substring(0, originalDate.toISOString().length - 1);
}

Hearst

{{ Your Date | slice: 0:10 | date:dateFormat }} – Hearst