Angular Date Pipe Printing Wrong Date After Transforming Original Date Value

javascript angular typescript date-pipe

1446 просмотра

3 ответа

2256 Репутация автора

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:

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

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

enter image description here

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?

Автор: Muirik Источник Размещён: 08.01.2018 05:51

Ответы (3)

0 плюса

453 Репутация автора

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

Автор: simpleDmitry Размещён: 08.01.2018 06:11

3 плюса

414 Репутация автора


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.setMinutes(d.getMinutes() - d.getTimezoneOffset());
Tue Jan 09 2018 05:38:38 GMT+0530 (India Standard Time)

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

Автор: Vipul Goyal Размещён: 08.01.2018 06:42

0 плюса

1 Репутация автора

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);
Автор: user11563130 Размещён: 27.05.2019 03:32
Вопросы из категории :