如何存储 Ant Design 的时间选择器时间？

Question

这是时间选择器：

<TimePicker
          defaultValue={moment("12:08", format)}
          format={format}
          placeholder="Horário"
        />

我试过类似的东西

const [time, setTime] = useState("");

而在时间选择器

onChange={(e) => setTime(e.target.value)}

但它只返回一个空字符串

Answer 1

onChange具有以下类型。

onChange?: ((value: moment.Moment | null, dateString: string) => void) | undefined

第一个参数的类型是 Moment，第二个参数是字符串。 您可以从第二个参数获取时间并将其存储在 state 中，或者如果您想在将时间存储在某个地方之前自定义时间，您可以使用时刻类型值，应用任何自定义逻辑。 您正在尝试使用e.target.value获取价值。 它的 onChange 参数与普通字段不同。 希望这能解决你的问题

完整代码

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);
            }}
        />
    );
}

Answer 2

如果你想操纵时间，你需要 dayJs。

      onChange={(time, timeString) => {
        console.log(time, timeString);
        let test = dayjs(time);
        console.log("test", test.format());
        // "2022-12-06T03:00:00+05:00"
      }}

安装： https://day.js.org/docs/en/installation/node.js