From 36166f9eb6d319596f7bff7a7fb8a904245d9c1e Mon Sep 17 00:00:00 2001 From: lee Date: Sun, 1 Feb 2026 21:26:22 -0800 Subject: [PATCH] fix: resolve timezone offset issue in edit modal date display When editing a subscription, the date in the modal was displaying one day earlier than expected. This occurred because the date string from the database (e.g., "2024-02-15") was being parsed with new Date(), which interprets it as UTC midnight. In timezones behind UTC (like EST), this caused the date to shift backward by one day when displayed in the user's local timezone. Fixed by replacing new Date() with parseISO() from date-fns, which properly handles ISO 8601 date strings without timezone interpretation issues. This matches the pattern already used in other components like CalendarGrid.tsx. Fixes issue where dates show correctly in the list and map but appear one day earlier in the edit modal. --- src/components/SubscriptionModal.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/SubscriptionModal.tsx b/src/components/SubscriptionModal.tsx index 36dbbaa..876142c 100644 --- a/src/components/SubscriptionModal.tsx +++ b/src/components/SubscriptionModal.tsx @@ -7,6 +7,7 @@ import getSymbolFromCurrency from 'currency-symbol-map'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import '@/styles/react-datepicker-dark.css'; +import { parseISO } from 'date-fns'; import { Subscription } from '@/types'; import { getRandomColor } from '@/lib/utils'; import styles from './SubscriptionModal.module.css'; @@ -50,10 +51,10 @@ export default function SubscriptionModal({ setId(selectedSubscription.id || null); setName(selectedSubscription.name); setAmount(selectedSubscription.amount.toString()); - setDueDate(selectedSubscription.dueDate - ? new Date(selectedSubscription.dueDate) - : (selectedSubscription.due_date - ? new Date(selectedSubscription.due_date) + setDueDate(selectedSubscription.dueDate + ? parseISO(selectedSubscription.dueDate) + : (selectedSubscription.due_date + ? parseISO(selectedSubscription.due_date) : null)); setIcon(selectedSubscription.icon || ''); setIconInput(selectedSubscription.icon || '');