From ccdbc803f57b103787a5bcfc05f778bce6bf9713 Mon Sep 17 00:00:00 2001
From: Akshat752 <akshatprakash8@gmail.com>
Date: Mon, 13 Jul 2026 12:30:55 -0400
Subject: [PATCH 1/3] use UTC timezone for displaying dates to avoid conversion

---
 src/components/ComicDisplay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ComicDisplay.jsx b/src/components/ComicDisplay.jsx
index 72e6c81..38127b0 100644
--- a/src/components/ComicDisplay.jsx
+++ b/src/components/ComicDisplay.jsx
@@ -6,7 +6,7 @@ function ComicDisplay({ date, comic, comicsData, comicsIndex, useLocalImages, us
   const [isArchiveOrgError, setIsArchiveOrgError] = useState(false)
   
   const formatDateString = (dateString) => {
-    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }
     return new Date(dateString).toLocaleDateString('en-UK', options)
   }
 

From 2f8b773ff035bf65d4dbb4e92b900a1d7ef7ad95 Mon Sep 17 00:00:00 2001
From: Akshat752 <akshatprakash8@gmail.com>
Date: Mon, 13 Jul 2026 14:38:02 -0400
Subject: [PATCH 2/3] fix datepicker time conversion

---
 src/components/DatePicker.jsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePicker.jsx b/src/components/DatePicker.jsx
index abcd03b..5ddf815 100644
--- a/src/components/DatePicker.jsx
+++ b/src/components/DatePicker.jsx
@@ -2,22 +2,34 @@ import { useState, useEffect } from 'react'
 import DatePickerLib from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 
+const parseLocalDate = (dateString) => {
+  const [year, month, day] = dateString.split('-').map(Number)
+  return new Date(year, month - 1, day) // local midnight, not UTC
+}
+
+const formatLocalDate = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
 function DatePicker({ value, onChange, minDate, maxDate }) {
   const [selectedDate, setSelectedDate] = useState(
-    value ? new Date(value) : null
+    value ? parseLocalDate(value) : null
   )
 
   // Update selectedDate when value prop changes
   useEffect(() => {
     if (value) {
-      setSelectedDate(new Date(value))
+      setSelectedDate(parseLocalDate(value))
     }
   }, [value])
 
   const handleDateChange = (date) => {
     setSelectedDate(date)
     if (date) {
-      const formattedDate = date.toISOString().split('T')[0]
+      const formattedDate = formatLocalDate(date) 
       onChange(formattedDate)
     }
   }
@@ -33,8 +45,8 @@ function DatePicker({ value, onChange, minDate, maxDate }) {
         selected={selectedDate}
         onChange={handleDateChange}
         dateFormat="yyyy-MM-dd"
-        minDate={new Date(minDate)}
-        maxDate={new Date(maxDate)}
+        minDate={parseLocalDate(minDate)}
+        maxDate={parseLocalDate(maxDate)}
         className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent bg-gray-50 dark:bg-gray-700 focus:bg-white dark:focus:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors"
         placeholderText="Select a date"
       />

From e1af9e0bc16ff5b246b593bfbeab4514baf3b249 Mon Sep 17 00:00:00 2001
From: Akshat752 <akshatprakash8@gmail.com>
Date: Tue, 14 Jul 2026 11:39:41 -0400
Subject: [PATCH 3/3] remove hovering for out of bound dates in date picker

---
 src/index.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 8775fe8..f76f036 100644
--- a/src/index.css
+++ b/src/index.css
@@ -71,15 +71,20 @@
   background-color: #2563eb;
 }
 
-.react-datepicker__day:hover {
+.react-datepicker__day:not(.react-datepicker__day--disabled):hover {
   border-radius: 0.375rem;
   background-color: #dbeafe;
 }
 
-.dark .react-datepicker__day:hover {
+.dark .react-datepicker__day:not(.react-datepicker__day--disabled):hover {
   background-color: #1e40af;
 }
 
+.react-datepicker__day--disabled:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
 .react-datepicker__day--today {
   font-weight: 600;
   color: #3b82f6;