在react.js中获取onChange事件的准确值

Question

我正在尝试获取日期 onChange 的值：

<Flatpickr
   data-enable-time
   name="goodsreadyby"
     options={{
       minDate: date,
       enableTime: true,
       dateFormat:
        'Y-m-d H:i:s'
       }}
     onChange={(date) => {setGoodsReadyBy({date})
     }}/>

我的问题是我收到了数组 onChange 事件。 目前：

{date: Array(1)}
date: Array(1)
0: Sat Mar 05 2022 16:20:00  (Some Standard Time)
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)
[[Prototype]]: Object

但我只需要 Sat Mar 05 2022 16:20:00 (Some Standard Time) 这样的值。我如何修改我的代码以获得我需要的确切值。

Answer 1

Flatpickr 的 onChange 属性的第一个参数是 selectedDates - 日期数组（您可以使用 selectedDates[0] 访问第一个参数并格式化它就像对待任何日期一样）。

第二个是 dateStr - 由 dateFormat 选项格式化。

export default function App() {
  return (
    <Flatpickr
      data-enable-time
      name="goodsreadyby"
      options={{
        enableTime: true,
        dateFormat: "Y-m-d H:i:s"
      }}
      onChange={(selectedDates, dateStr, instance) => {
        const firstDate = selectedDates[0];
        console.log({ firstDate, dateStr });
      }}
    />
  );
}

onChange 调用时将接收 3 个参数。这些是：

• selectedDates - 用户选择的日期对象数组。当没有选择日期时，数组为空。
• dateStr - 用户最新选择的 Date 对象的字符串表示形式。该字符串按照 dateFormat 选项进行格式化。
• instance - flatpickr 对象，包含各种方法和属性。

Flatpickr 文档

Answer 2

您可以打印日期，例如

goodsReadyBy?.date[0].toString()

单独获取日期字符串的代码：

const App = () => {
  const [goodsReadyBy, setGoodsReadyBy] = useState();
  return (
    <div>
      <Flatpickr
        data-enable-time
        name="goodsreadyby"
        options={{
          enableTime: true,
          dateFormat: "Y-m-d H:i:s"
        }}
        onChange={(date) => {
          setGoodsReadyBy({ date });
        }}
      />
      <p> {goodsReadyBy?.date[0].toString()} </p>
    </div>
  );
};

Codesandbox:

Answer 3

那么您的数组只有一个元素，因此您可以使用下面的代码。

 onChange={(date) => {setGoodsReadyBy({date[0]})

它将为您提供所需格式的数据。