Angular 8, material datepicker saving correct date, but displaying previous day

I'm using Angular 8 and the Material DatePicker.

When I submit my date and time to the postgres database, it stores the date and time exactly as it is in the UI and the UI is updated and displays the same date and time.

I would expect that the date and time on the database should be ahead of the date and time I specified in the UI because the database saves as UTC.

For example, in the UI I have 09/24/2024 22hrs, 04minutes, and I would expect the database which is Postgres to have a date of 09/25/2024 06hrs, 04minutes, but it has 09/24/2024 22hrs, 04minutes.

When I hit refresh in the browser, the date and time in my UI are updated to 09/23/2024 and 06hrs and 04minutes. So it is all backwards.

I'm using moment.js in the front-end with variations on moment.utc(datetime).tz("America/Los_Angeles").format("yyyy/MM/DD HH:mm") and moment.tz(datetime, "America/Los_Angeles").format("yyyy/MM/DD HH:mm").

The expected behavior is date entered in the UI should be what is always displayed and the date stored in the database is UTC, which is about 8 hours ahead of my time.

Thanks,

I have tried saving the data to the database using:

• moment.utc(datetime).tz("America/Los_Angeles").format("yyyy/MM/DD HH:mm")
• moment.tz(datetime, "America/Los_Angeles").format("yyyy/MM/DD HH:mm"
• moment.utc(datetime)

I've console.log'd every variation, but an unable to fix.

If I only update the time and not the date, the data in the database is correct and the UI is correct, but when I update the date that causes the issue.

Continue reading...