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

open timepicker just with click on input(no click on icon)

Browse Source
This commit is contained in:
Ehsan
2024-10-20 23:09:05 +03:30
parent 804c9f96dd
commit 773b64ca25
4 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/TimePickerField.js
+24 -3
View File
@@ -1,18 +1,26 @@
import { useState } from "react"; import { useEffect, useRef, useState } from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"; import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
import { handleTwoLength } from "@/helper"; import { handleTwoLength } from "@/helper";
function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) { function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
const input = useRef();
const [value, setValue] = useState("00:00"); const [value, setValue] = useState("00:00");
const [isOpen, setIsOpen] = useState(false);
const openTimePicker = () => setIsOpen(true);
const closeTimePicker = () => setIsOpen(false);
return ( return (
<div className="w-full relative field-date-picker"> <div className="w-full relative field-date-picker">
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker <TimePicker
ampm={false} ampm={false}
open={isOpen}
onClose={closeTimePicker}
disabled={isVacation} disabled={isVacation}
format="hh:mm" format="hh:mm"
ref={input}
className="!w-full" className="!w-full"
shouldDisableTime={(timeValue, clockType) => { shouldDisableTime={(timeValue, clockType) => {
if (clockType === "hours") { if (clockType === "hours") {
@@ -28,6 +36,9 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
: !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour); : !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
} }
}} }}
renderInput={(params) => {
return <TextField {...params} onClick={(e) => setOpen(true)} />;
}}
views={["hours", "minutes"]} views={["hours", "minutes"]}
placeholder="انتخاب کنید..." placeholder="انتخاب کنید..."
onChange={(e) => { onChange={(e) => {
@@ -69,13 +80,23 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
}} }}
/> />
<p <p
className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_16px)] flex items-center right-[4px] py-[8px] px-[8px] className={`absolute cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px]
w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2 w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
${disable && "!text-[rgba(126,126,126,0.5)]"}`} ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
onClick={openTimePicker}
> >
{value} {value}
</p> </p>
</LocalizationProvider> </LocalizationProvider>
{/* <button
onClick={() => {
console.log(input);
input.current.open = true;
}}
>
test
</button> */}
</div> </div>
); );
} }
app/layout.js
+4
View File
@@ -15,6 +15,10 @@ export const metadata = {
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="fa" dir="rtl" suppressHydrationWarning> <html lang="fa" dir="rtl" suppressHydrationWarning>
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1"
/>
<ThemeRegistry> <ThemeRegistry>
<body className="bg-[#FAFAFA]"> <body className="bg-[#FAFAFA]">
<Providers>{children}</Providers> <Providers>{children}</Providers>
components/panel/addDoctor/index.js
+9 -7
View File
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step"; import Step from "./Step";
function AddDoctorPage() { function AddDoctorPage() {
const [value, setValue] = useState(0); const [value, setValue] = useState(2);
const [data, setData] = useState({ const [data, setData] = useState({
general: { general: {
name: { value: "", placeholder: "احسان احمدی", isEdit: true }, name: { value: "", placeholder: "احسان احمدی", isEdit: true },
@@ -35,7 +35,7 @@ function AddDoctorPage() {
work_day: [ work_day: [
{ {
name: "شنبه", name: "شنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -43,7 +43,7 @@ function AddDoctorPage() {
}, },
{ {
name: "یکشنبه", name: "یکشنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -51,7 +51,7 @@ function AddDoctorPage() {
}, },
{ {
name: "دوشنبه", name: "دوشنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -59,7 +59,7 @@ function AddDoctorPage() {
}, },
{ {
name: "سه شنبه", name: "سه شنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -67,7 +67,7 @@ function AddDoctorPage() {
}, },
{ {
name: "چهار شنبه", name: "چهار شنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -75,7 +75,7 @@ function AddDoctorPage() {
}, },
{ {
name: "پنج شنبه", name: "پنج شنبه",
number_turns: "", number_turns: 1,
turn_time: "", turn_time: "",
workplace: "", workplace: "",
morning_time: ["", ""], morning_time: ["", ""],
@@ -83,6 +83,8 @@ function AddDoctorPage() {
}, },
], ],
}); });
console.log(data);
const components = [ const components = [
<GeneralInformation <GeneralInformation
components/panel/addDoctor/listMenu/workingDays/modal/Form.js
+2 -2
View File
@@ -2,7 +2,7 @@ import { Button } from "@mui/material";
import ContentText from "@/app/component/ContentText"; import ContentText from "@/app/component/ContentText";
import TimePickerField from "@/app/component/TimePickerField"; import TimePickerField from "@/app/component/TimePickerField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"; import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { numberTurns, turnTime, workplace } from "./listSelector"; import { turnTime, workplace } from "./listSelector";
import EditField from "@/app/component/EditField"; import EditField from "@/app/component/EditField";
function Form({ function Form({
@@ -36,7 +36,7 @@ function Form({
name="number_turns" name="number_turns"
props={{ props={{
inputProps: { inputProps: {
min: 0, min: 1,
max: 10, max: 10,
}, },
}} }}