When working with date pickers in web applications, especially in form-based interfaces, developers often encounter a common and frustrating issue: a date that was selected by the user appears one day earlier when reloaded in an edit form.
This article explores how we resolved this issue in a React application using react-datepicker, and what you can do to prevent this problem in your own projects.
🐞 The Problem
In our PD Order creation module, we had a “Promised Date” field. Users could pick a date (e.g., 2025-05-03) during order creation. However, upon editing the same order, the date picker was showing 2025-05-02.
Why?
This issue is rooted in JavaScript’s native Date object and how it interprets date strings and timezones.
For example:
new Date(“2025-05-03T00:00:00”)
This string is interpreted as UTC, not local time. In a timezone like IST (UTC+5:30), this becomes:
Thu May 02 2025 23:30:00 GMT+0530 (IST)
JavaScript Date objects handle ISO 8601 date strings as UTC.
UI libraries like react-datepicker use the local time of the browser.
This mismatch leads to date shifts, especially for users in non-UTC timezones.