add component hour field to page add-doctor
This commit is contained in:
Ehsan
@@ -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
|
||||
@@ -16,7 +16,7 @@ const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت
|
||||
|
||||
function AddDoctorPage() {
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [value, setValue] = useState(3);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
@@ -1,35 +1,15 @@
|
||||
import { useState } from "react";
|
||||
import ClockP from "@/components/icons/ClockP";
|
||||
import FieldIcon from "@/app/component/FieldIcon";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { Button } from "@mui/material";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import TimePickerField from "@/app/component/TimePickerField";
|
||||
|
||||
function Form({ handleClose }) {
|
||||
|
||||
const [data, setData] = useState({
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
});
|
||||
|
||||
const changeData = (value, name) => setData({ ...data, [name]: value })
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||
<ContentText text='زمان شروع'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='start_time'
|
||||
/>
|
||||
<TimePickerField />
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='end_time'
|
||||
/>
|
||||
<TimePickerField />
|
||||
</ContentText>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[16px]">
|
||||
<Button
|
||||
@@ -43,7 +23,7 @@ function Form({ handleClose }) {
|
||||
className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
|
||||
>ذخیره</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Generated
+94
-3
@@ -15,8 +15,10 @@
|
||||
"@mui/material": "^5.16.7",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
|
||||
"@mui/x-charts": "^7.16.0",
|
||||
"@mui/x-date-pickers": "^7.17.0",
|
||||
"aos": "^2.3.4",
|
||||
"date-fns": "^3.6.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"i": "^0.3.7",
|
||||
"jalaali-react-date-picker": "^1.0.18",
|
||||
"jalali-moment": "^3.3.11",
|
||||
@@ -3753,6 +3755,90 @@
|
||||
"robust-predicates": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.17.0.tgz",
|
||||
"integrity": "sha512-3mIw1uOZU/yKweZsVAo9QnwVFzLHqXgXG1TbGbDJ4AU6FhN2TCUlR9tzKHSlYdAHZ0bEWDS1/bgeGsQC7skXMA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.6",
|
||||
"@mui/utils": "^5.16.6",
|
||||
"@mui/x-internals": "7.17.0",
|
||||
"@types/react-transition-group": "^4.4.11",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.15.14 || ^6.0.0",
|
||||
"@mui/system": "^5.15.14 || ^6.0.0",
|
||||
"date-fns": "^2.25.0 || ^3.2.0",
|
||||
"date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^3.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"moment-hijri": "^2.1.2",
|
||||
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns-jalali": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-hijri": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-jalaali": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.17.0.tgz",
|
||||
"integrity": "sha512-FLlAGSJl/vsuaA/8hPGazXFppyzIzxApJJDZMoTS0geUmHd0hyooISV2ltllLmrZ/DGtHhI08m8GGnHL6/vVeg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.6",
|
||||
"@mui/utils": "^5.16.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-internals": {
|
||||
"version": "7.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.16.0.tgz",
|
||||
@@ -4909,9 +4995,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
|
||||
"integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
|
||||
"version": "4.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
|
||||
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
@@ -7698,6 +7784,11 @@
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
|
||||
|
||||
@@ -16,8 +16,10 @@
|
||||
"@mui/material": "^5.16.7",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
|
||||
"@mui/x-charts": "^7.16.0",
|
||||
"@mui/x-date-pickers": "^7.17.0",
|
||||
"aos": "^2.3.4",
|
||||
"date-fns": "^3.6.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"i": "^0.3.7",
|
||||
"jalaali-react-date-picker": "^1.0.18",
|
||||
"jalali-moment": "^3.3.11",
|
||||
|
||||
Reference in New Issue
Block a user