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

我的问题是我收到 Array 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 will receive 3 arguments when called. These are:

selectedDates - an array of Date objects selected by the user. When there are no dates selected, the array is empty.

dateStr - a string representation of the latest selected Date object by the user. The string is formatted as per the dateFormat option.

instance - the flatpickr object, containing various methods and properties.

Flatpickr docs

Answer 2

你的数组只有一个元素，所以你可以使用下面的代码。

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

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

Answer 3

您可以像这样打印日期，

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:

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

Get accurate value onChange event in react.js

javascript

onchange

reactjs