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.
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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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