use UTC timezone for displaying dates to avoid conversion

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)
   }
 

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"
       />

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;