Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue has arisen where the date pipe seems to be transforming the date incorrectly when displayed.
To clarify, the raw date displays accurately on the screen. When editing the value passed through the date pipe, the correct date is saved. Yet, post-editing, the transformed date value shifts slightly (not affecting what is actually stored but impacting what is visually presented). This discrepancy usually results in a one-day difference. It appears that perhaps a default timezone setting is causing this inconsistency?
Below is my view code snippet showing both the date value processed by the date pipe and the unaltered version:
<!-- 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" />
The following output reflects what is displayed on the screen based on the above code:
https://i.stack.imgur.com/fLcFu.png
The mismatch between the values shown demonstrates a one-day discrepancy. How can I ensure that the accurate transformed value is correctly displayed after passing through the date pipe?