add component hour field to page add-doctor

2024-09-15 19:49:14 +03:30
parent 5606a7e53f
commit f732a495f9
5 changed files with 153 additions and 29 deletions
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
+
+function TimePickerField() {
+
+    const [value, setValue] = useState('00:00');
+
+    return (
+        <div className="w-full relative">
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <TimePicker
+                    ampm={false}
+                    format="hh:mm"
+                    className="!w-full"
+                    views={['hours', 'minutes']}
+                    placeholder="انتخاب کنید..."
+                    onChange={e => {
+                        const hours = e.$H;
+                        const minute = e.$m;
+                        const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
+
+                        setValue(`${handleTwoLength(hours)}:${handleTwoLength(minute)}`)
+                    }}
+                    sx={{
+                        '& .MuiFormLabel-root': {
+                            top: '-4px !important'
+                        },
+                        '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                        '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+                        '& .MuiInputBase-root': {
+                            borderRadius: '8px !important'
+                        },
+                        '.Mui-focused': {
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                border: '1px solid #5559CE !important',
+                                transition: '0.5s all'
+                            }
+                        },
+                        '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
+                            display: 'none !important'
+                        }
+                    }}
+                />
+                <p className="absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2">{value}</p>
+            </LocalizationProvider>
+        </div>
+    )
+}
+
+export default TimePickerField