hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle disable hour time end greater than time start

Browse Source
This commit is contained in:
Ehsan
2024-09-18 03:24:34 +03:30
parent 3c7d6af867
commit e4ad931da4
7 changed files with 89 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/TimePickerField.js
+16 -6
View File
@@ -2,7 +2,7 @@ import { useState } from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
function TimePickerField({ dataChange, setData, data }) {
function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
const [value, setValue] = useState('00:00');
@@ -11,13 +11,21 @@ function TimePickerField({ dataChange, setData, data }) {
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
ampm={false}
disabled={disable}
format="hh:mm"
className="!w-full"
shouldDisableTime={(timeValue, clockType) => {
if (clockType === 'hours') {
const { idx, is_morgen } = dataChange;
const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
const hourSelected = value ? +value.split(':')[0] : false
const disableMinHour = timeStart || !value ? false :
(hourSelected + 1 > timeValue.$H)
return dataChange.is_morgen ?
!(16 > timeValue.$H && timeValue.$H > 5) :
!(24 > timeValue.$H && timeValue.$H > 11)
!(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
!(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
}
}}
views={['hours', 'minutes']}
@@ -29,8 +37,8 @@ function TimePickerField({ dataChange, setData, data }) {
const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
const newData = data;
const { idx, is_morning } = dataChange;
newData[idx][is_morning ? 'morning_time' : 'evening_time'] = newValue
const { idx, is_morgen } = dataChange;
newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
setValue(newValue);
}}
@@ -54,7 +62,9 @@ function TimePickerField({ dataChange, setData, data }) {
}
}}
/>
<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>
<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
${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
</LocalizationProvider>
</div>
)