TimePicker can not get the value I set when clicked 12H

Hi!

It seems there's a typo in our documentation. You can use the customValue instead of setTime. If you don't want to set the value and just want to get it - you can use the getValue property. It should look like that (using buttons):

import React, { useState } from 'react';
import { MDBBtn, MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  const [customValue, setCustomValue] = useState('06:30 PM');
  return (
    <>
      <MDBTimepicker getValue(e => console.log(e)) customValue={customValue} />
      <div className='mt-4'>
        <MDBBtn onClick={() => setCustomValue('10:15 AM')}>10:15 AM</MDBBtn>
        <MDBBtn onClick={() => setCustomValue('09:45 PM')}>09:45 PM</MDBBtn>
      </div>
    </>
  );
}

Sorry for that.

Keep coding!

I followed the code in the example below, but I couldn't achieve the effect. When I changed the defaultTime to defaultValue, I could implement the sample. But when I use the time selector, when I choose 12, it becomes 23 o'clock, and that's my problem.

Hi!

There's no property in the MDBTimePicker component like defaultTime. To set a default value once, when the component mounts, use the defaultValue instead.

Is it possible to create a sample repository just with this problem and share it with me? I can't recreate this problem. Do you want to change the value of your picker programmatically or just get the value you picked? Could you also specify details about your browser?

The code I attached below works perfectly for me. Does it cause problems for you?

import React, { useState, useEffect } from "react";
import { MDBTimepicker } from "mdb-react-ui-kit";

export default function App() {
  const [customValue, setCustomValue] = useState("");
  const defaultTime = "23:44";

  useEffect(() => {
    console.log(customValue);
  }, [customValue]);

  return (
    <MDBTimepicker
      customIcon="fas fa-clock"
      format="24h"
      defaultValue={defaultTime}
      getValue={(e) => setCustomValue(e)}
    />
  );
}

Keep coding!