Topic: Want to open timepicker on click of input along with icon

emmdb priority asked 3 months ago


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;


Mateusz Lazaru staff answered 3 months ago


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)}
    />
  );
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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