crud schedule

src/components/TimePicker.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef, type FC } from 'react';
-import { clx } from '../helpers/utils';
+import { useState, useRef, useEffect, type FC } from 'react';
+import { clx, formatTimeToHHmm } from '../helpers/utils';
 import { Clock } from 'iconsax-react';
 import Error from './Error';
 
@@ -18,9 +18,8 @@ const TimePickerComponent: FC<Props> = (props: Props) => {
 
     useEffect(() => {
         if (props.defaultValue) {
-            // تبدیل فرمت HH.mm به HH:mm برای input type="time"
-            const timeStr = props.defaultValue.replace('.', ':');
-            setInputValue(timeStr);
+            const timeValue = formatTimeToHHmm(props.defaultValue.replace('.', ':'));
+            setInputValue(timeValue);
         }
     }, [props.defaultValue]);
 
@@ -29,9 +28,8 @@ const TimePickerComponent: FC<Props> = (props: Props) => {
         setInputValue(timeValue);
 
         if (timeValue) {
-            // تبدیل فرمت HH:mm به HH.mm برای ارسال به سرور
-            const formattedTime = timeValue.replace(':', '.');
-            props.onChange(formattedTime);
+            // فرمت HH:mm را مستقیماً ارسال می‌کنیم
+            props.onChange(timeValue);
         } else {
             props.onChange('');
         }
@@ -67,11 +65,7 @@ const TimePickerComponent: FC<Props> = (props: Props) => {
                         type="time"
                         value={inputValue}
                         onChange={handleChange}
-                        className="w-full h-full bg-transparent border-0 outline-none cursor-pointer text-right time-picker-input"
-                        style={{
-                            color: inputValue ? '#000' : 'transparent',
-                            caretColor: 'transparent'
-                        }}
+                        className="absolute opacity-0 w-full h-full cursor-pointer"
                     />
                     {!inputValue && (
                         <span className="absolute right-4 text-description pointer-events-none">
@@ -80,7 +74,7 @@ const TimePickerComponent: FC<Props> = (props: Props) => {
                     )}
                     {inputValue && (
                         <span className="absolute right-4 pointer-events-none text-black">
-                            {inputValue.replace(':', '.')}
+                            {inputValue}
                         </span>
                     )}
                     <Clock size={20} color="#8C90A3" className='absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none z-10' />