Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

Zhou premium asked 2 years ago


When I use the getValue property to change the value, When I open the TimePicker modal, then click the 12hour(24h format), But the Hour did not change.

Now, I have updated to the 2.3.0 version. Timepicker - add setTime property to change a value programmatically I do not see the setTime property when using TimePicker. How can I get the time I picked?

Resources (screenshots, code snippets etc.)

<MDBTimepicker
                        defaultValue={defaultTime}
                        customIcon="fas fa-clock"
                        format="24h"
                        getValue={(value) => {
                          setCustomizedTime(value);
                          if (!checkTime(value)) {
                            setCustomizedTimeValidation(true);
                          } else {
                            setCustomizedTimeValidation(false);
                          }
                        }}
                      />

Krzysztof Wilk staff answered 2 years ago


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!


Zhou premium answered 2 years ago


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.


Zhou premium commented 2 years ago

Like this ,I couldn`t select 12 when I use the defaultValue.


Zhou premium commented 2 years ago

MDBTimepicker format='24h' defaultTime='23:44' MDBTimepicker format='24h' defaultValue='23:44'


Krzysztof Wilk staff answered 2 years ago


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!



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: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 2.3.0
  • Device: every device
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No