Topic: Want to open timepicker on click of input along with icon
Want to open timepicker on click of input along with icon
current timepicker open either on input or on click of icon
import React from "react";
import { MDBTimepicker } from 'mdb-react-ui-kit';
interface TimePickerProps { id? : string | Number onChange?: (e: React.ChangeEvent) => void; }
const TimePicker: React.FC = ({id, onChange}) => {
return (
<div>
<MDBTimepicker />
</div>
)
}
export default TimePicker;
Hi, try this:
import React, { useState, useRef, useEffect } from "react";
import { MDBTimepicker } from "mdb-react-ui-kit";
export default function App() {
const [open, setOpen] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const input = inputRef.current;
input?.addEventListener("click", () => setOpen(true));
}, []);
return (
<MDBTimepicker
ref={inputRef}
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
/>
);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 8.0.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No