[英]How can i store the Ant Design's Time Picker time?
This is the time picker:这是时间选择器:
<TimePicker
defaultValue={moment("12:08", format)}
format={format}
placeholder="Horário"
/>
I tried something like我试过类似的东西
const [time, setTime] = useState("");
And at the time picker而在时间选择器
onChange={(e) => setTime(e.target.value)}
But it just returns an empty string但它只返回一个空字符串
onChange
have the following type. onChange
具有以下类型。
onChange?: ((value: moment.Moment | null, dateString: string) => void) | undefined
The first parameter have the type Moment & second one is string.第一个参数的类型是 Moment,第二个参数是字符串。 You can get the time from the second parameter and store it in state or if you want to customize time before storing it somewhere, you can use moment type value, apply any custom logic.
您可以从第二个参数获取时间并将其存储在 state 中,或者如果您想在将时间存储在某个地方之前自定义时间,您可以使用时刻类型值,应用任何自定义逻辑。 You are trying to get value using
e.target.value
.您正在尝试使用
e.target.value
获取价值。 It's onChange parameter are different as compare to normal field.它的 onChange 参数与普通字段不同。 Hope this solve your problem
希望这能解决你的问题
Complete Code完整代码
import moment from 'moment';
import { useState } from 'react';
import { TimePicker } from 'antd';
const format = 'HH:mm';
export default function App() {
const [time, setTime] = useState('12:08');
return (
<TimePicker
format={format}
value={moment(time, format)}
placeholder='Horário'
// onChange?: ((value: moment.Moment | null, dateString: string) => void) | undefined
onChange={(value, dateString) => {
console.log('Time', value, dateString);
setTime(dateString);
}}
/>
);
}
You need dayJs if you want to manipulate time.如果你想操纵时间,你需要 dayJs。
onChange={(time, timeString) => {
console.log(time, timeString);
let test = dayjs(time);
console.log("test", test.format());
// "2022-12-06T03:00:00+05:00"
}}
Install: https://day.js.org/docs/en/installation/node.js安装: https://day.js.org/docs/en/installation/node.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.