Question 205563 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Not able to get input changes from tailwind time picker

Using the tailwind elements library, I am not able to listen to changes on the time picker as defined:

const MyTimePicker = () => {
  useEffect(() => {
    initTE({ Timepicker, Input });
  }, []);

  // get data from timepicker
  const handleTimepickerChange = (e) => {
    console.log(e.target.value);
  };

  return (
    <div
      className="relative"
      data-te-timepicker-init
      data-te-input-wrapper-init
    >
      <input
        type="text"
        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
        id="form1"
        placeholder="Select a time"
        onChange={handleTimepickerChange}
      />
      <label
        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
      >Select a time</label>
    </div>
  )
}
Tags:

2

Answers


  1. 0

    the "handleTimepickerChange" function you created requires the parameter "e", which would be the event, but you’re not providing it when you call the onChange. Replace it with this:

    onChange={(event) => handleTimepickerChange(event)}
    Login or Signup to reply.
  2. 0

    In my opinion, you are using the wrong attribute to listen to changes on the timepicker. You should use the data-te-options attribute on the div element that has the data-te-timepicker-init attribute. You can set up the timepicker and pass any options you want using this.

    For example:

    <div
  /* ... */
  data-te-timepicker-init
  data-te-options={JSON.stringify({ onChange: handleTimepickerChange })}
>
  /* ... */
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search