如何存儲 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