open timepicker just with click on input(no click on icon)
This commit is contained in:
Ehsan
@@ -1,18 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
|
||||
import { handleTwoLength } from "@/helper";
|
||||
|
||||
function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
|
||||
const input = useRef();
|
||||
const [value, setValue] = useState("00:00");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const openTimePicker = () => setIsOpen(true);
|
||||
const closeTimePicker = () => setIsOpen(false);
|
||||
|
||||
return (
|
||||
<div className="w-full relative field-date-picker">
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<TimePicker
|
||||
ampm={false}
|
||||
open={isOpen}
|
||||
onClose={closeTimePicker}
|
||||
disabled={isVacation}
|
||||
format="hh:mm"
|
||||
ref={input}
|
||||
className="!w-full"
|
||||
shouldDisableTime={(timeValue, clockType) => {
|
||||
if (clockType === "hours") {
|
||||
@@ -28,6 +36,9 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
|
||||
: !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => {
|
||||
return <TextField {...params} onClick={(e) => setOpen(true)} />;
|
||||
}}
|
||||
views={["hours", "minutes"]}
|
||||
placeholder="انتخاب کنید..."
|
||||
onChange={(e) => {
|
||||
@@ -69,13 +80,23 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_16px)] 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
|
||||
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%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
|
||||
${disable && "!text-[rgba(126,126,126,0.5)]"}`}
|
||||
onClick={openTimePicker}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</LocalizationProvider>
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
console.log(input);
|
||||
|
||||
input.current.open = true;
|
||||
}}
|
||||
>
|
||||
test
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,10 @@ export const metadata = {
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="fa" dir="rtl" suppressHydrationWarning>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1,maximum-scale=1"
|
||||
/>
|
||||
<ThemeRegistry>
|
||||
<body className="bg-[#FAFAFA]">
|
||||
<Providers>{children}</Providers>
|
||||
|
||||
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
|
||||
import Step from "./Step";
|
||||
|
||||
function AddDoctorPage() {
|
||||
const [value, setValue] = useState(0);
|
||||
const [value, setValue] = useState(2);
|
||||
const [data, setData] = useState({
|
||||
general: {
|
||||
name: { value: "", placeholder: "احسان احمدی", isEdit: true },
|
||||
@@ -35,7 +35,7 @@ function AddDoctorPage() {
|
||||
work_day: [
|
||||
{
|
||||
name: "شنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -43,7 +43,7 @@ function AddDoctorPage() {
|
||||
},
|
||||
{
|
||||
name: "یکشنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -51,7 +51,7 @@ function AddDoctorPage() {
|
||||
},
|
||||
{
|
||||
name: "دوشنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -59,7 +59,7 @@ function AddDoctorPage() {
|
||||
},
|
||||
{
|
||||
name: "سه شنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -67,7 +67,7 @@ function AddDoctorPage() {
|
||||
},
|
||||
{
|
||||
name: "چهار شنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -75,7 +75,7 @@ function AddDoctorPage() {
|
||||
},
|
||||
{
|
||||
name: "پنج شنبه",
|
||||
number_turns: "",
|
||||
number_turns: 1,
|
||||
turn_time: "",
|
||||
workplace: "",
|
||||
morning_time: ["", ""],
|
||||
@@ -83,6 +83,8 @@ function AddDoctorPage() {
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
|
||||
const components = [
|
||||
<GeneralInformation
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Button } from "@mui/material";
|
||||
import ContentText from "@/app/component/ContentText";
|
||||
import TimePickerField from "@/app/component/TimePickerField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import { numberTurns, turnTime, workplace } from "./listSelector";
|
||||
import { turnTime, workplace } from "./listSelector";
|
||||
import EditField from "@/app/component/EditField";
|
||||
|
||||
function Form({
|
||||
@@ -36,7 +36,7 @@ function Form({
|
||||
name="number_turns"
|
||||
props={{
|
||||
inputProps: {
|
||||
min: 0,
|
||||
min: 1,
|
||||
max: 10,
|
||||
},
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user