CI/CD

src/libs/styles/AppJalaliDatepicker.tsx

@@ -10,9 +10,9 @@ import type { BoxProps } from '@mui/material/Box'
 
 // Third-party Imports
 import { Calendar } from 'react-multi-date-picker'
-import type { DateObject } from 'react-multi-date-picker'
+import DateObject from 'react-date-object'
 import persian from 'react-date-object/calendars/persian'
-import fa from 'react-date-object/locales/fa'
+import persian_fa from 'react-date-object/locales/persian_fa'
 
 // Styles - base styles only, we override colors via sx
 import 'react-multi-date-picker/styles/colors/teal.css'
@@ -30,23 +30,23 @@ const AppJalaliDatepicker = (props: AppJalaliDatepickerProps) => {
   const [internalValue, setInternalValue] = useState<DateObject | undefined>(() => {
     const d = externalValue ?? new Date()
 
-    return new DateObject(d, { calendar: persian, locale: fa })
+    return new DateObject({ date: d, calendar: persian, locale: persian_fa })
   })
 
   useEffect(() => {
     if (externalValue != null) {
-      setInternalValue(new DateObject(externalValue, { calendar: persian, locale: fa }))
+      setInternalValue(new DateObject({ date: externalValue, calendar: persian, locale: persian_fa }))
     }
   }, [externalValue])
 
   const handleChange = (d: DateObject | null) => {
     if (d) {
-      setInternalValue(d)
+      setInternalValue(d as unknown as DateObject)
       onChange?.(d.toDate())
     }
   }
 
-  const displayValue = internalValue ?? new DateObject({ calendar: persian, locale: fa })
+  const displayValue = internalValue ?? new DateObject({ calendar: persian, locale: persian_fa })
 
   return (
     <Box
@@ -87,9 +87,9 @@ const AppJalaliDatepicker = (props: AppJalaliDatepickerProps) => {
     >
       <Calendar
         value={displayValue}
-        onChange={handleChange}
+        onChange={handleChange as any}
         calendar={persian}
-        locale={fa}
+        locale={persian_fa}
         className="teal"
       />
     </Box>