fix date

src/components/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, type FC } from 'react';
+import { useState, useEffect, useRef, type FC } from 'react';
 import DatePicker from 'react-multi-date-picker';
 import persian from 'react-date-object/calendars/persian';
 import persian_fa from 'react-date-object/locales/persian_fa';
@@ -19,6 +19,8 @@ type Props = {
 
 const DatePickerComponent: FC<Props> = (props: Props) => {
     const [value, setValue] = useState<DateObject | null>(null);
+    const isSettingDefaultValue = useRef(false);
+    const isInitialized = useRef(false);
 
     useEffect(() => {
         if (props.reset) {
@@ -27,6 +29,19 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
     }, [props.reset]);
 
     useEffect(() => {
+        // فقط وقتی کاربر تاریخ رو تغییر داده onChange رو صدا بزن
+        if (isSettingDefaultValue.current) {
+            isSettingDefaultValue.current = false;
+            return;
+        }
+
+        // اگر هنوز initialize نشده و value null هست، onChange رو صدا نزن
+        if (!isInitialized.current && !value) {
+            return;
+        }
+
+        isInitialized.current = true;
+
         if (value) {
             // تبدیل تاریخ شمسی به میلادی
             const gregorianDate = value.toDate();
@@ -43,19 +58,28 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
 
     useEffect(() => {
         if (props.defaulValue) {
-            const defaultDate = new DateObject({
-                date: props.defaulValue,
-                calendar: persian,
-                locale: persian_fa,
-            });
-            const currentValueStr = value ? `${value.year}-${value.month.number}-${value.day}` : null;
-            const defaultValueStr = `${defaultDate.year}-${defaultDate.month.number}-${defaultDate.day}`;
-            if (currentValueStr !== defaultValueStr) {
-                setValue(defaultDate);
+            try {
+                const defaultDate = new DateObject({
+                    date: props.defaulValue,
+                    calendar: persian,
+                    locale: persian_fa,
+                });
+
+                const currentValueStr = value ? `${value.year}-${value.month.number}-${value.day}` : null;
+                const defaultValueStr = `${defaultDate.year}-${defaultDate.month.number}-${defaultDate.day}`;
+
+                if (currentValueStr !== defaultValueStr) {
+                    isSettingDefaultValue.current = true;
+                    setValue(defaultDate);
+                }
+            } catch (error) {
+                console.error('Error parsing date:', error);
             }
         } else if (!props.defaulValue && value) {
+            isSettingDefaultValue.current = true;
             setValue(null);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.defaulValue]);
 
     return (

src/pages/coupon/Update.tsx

@@ -155,7 +155,11 @@ const UpdateCoupon: FC = () => {
                             onCouponTypeChange={setCouponType}
                         />
 
-                        <CouponUsageSettings formik={formik} />
+                        {
+                            formik.values.startDate && (
+                                <CouponUsageSettings formik={formik} />
+                            )
+                        }
                     </div>
                 </div>
 

src/pages/coupon/components/CouponUsageSettings.tsx

@@ -10,16 +10,15 @@ interface CouponUsageSettingsProps {
 }
 
 const CouponUsageSettings: FC<CouponUsageSettingsProps> = ({ formik }) => {
-    const convertToGregorian = (persianDate: string): string | null => {
-        if (!persianDate) return null
-        const gregorianDate = moment(persianDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD')
-        return gregorianDate
-    }
-
     const convertToPersian = (gregorianDate: string | null): string | undefined => {
         if (!gregorianDate) return undefined
-        const persianDate = moment(gregorianDate, 'YYYY-MM-DD').format('jYYYY-jMM-jDD')
-        return persianDate
+        try {
+            const persianDate = moment(gregorianDate).format('jYYYY-jMM-jDD')
+            return persianDate
+        } catch (error) {
+            console.error('Error converting date:', error)
+            return undefined
+        }
     }
 
     return (
@@ -50,23 +49,19 @@ const CouponUsageSettings: FC<CouponUsageSettingsProps> = ({ formik }) => {
 
             <div className='grid grid-cols-2 gap-4 mb-6'>
                 <DatePickerComponent
-                    key={`startDate-${formik.values.startDate || 'empty'}`}
                     label='تاریخ شروع'
                     placeholder='تاریخ شروع را انتخاب کنید'
                     defaulValue={convertToPersian(formik.values.startDate)}
                     onChange={(date) => {
-                        const gregorianDate = convertToGregorian(date)
-                        formik.setFieldValue('startDate', gregorianDate)
+                        formik.setFieldValue('startDate', date || null)
                     }}
                 />
                 <DatePickerComponent
-                    key={`endDate-${formik.values.endDate || 'empty'}`}
                     label='تاریخ پایان'
                     placeholder='تاریخ پایان را انتخاب کنید'
                     defaulValue={convertToPersian(formik.values.endDate)}
                     onChange={(date) => {
-                        const gregorianDate = convertToGregorian(date)
-                        formik.setFieldValue('endDate', gregorianDate)
+                        formik.setFieldValue('endDate', date || null)
                     }}
                 />
             </div>