为什么我应该添加 selected 属性以在具有范围的 react-datepicker 中获取小时、分钟、秒信息？

Question

我尝试使用带范围的 react-datepicker。
如果我没有设置属性selected={startDate}，我安慰的时候总是得到Tue Apr 19 2022 00:00:00 GMT+0800 (xxxx standardtime)没有时间信息。但是，当我应用属性 selected 时，我可以获得带有时间信息的 Tue Apr 19 2022 16:19:09 GMT+0800 (xxxx standardtime)。我不想丢失时间信息，但我不知道为什么我必须应用选定的信息。在这种情况下，我只为 startDate 设置了 selected ，这使得 endDate 不更新....

谢谢。

      const [dateRange, setDateRange ] = useState([new Date(), new Date()])
      <DatePicker
            selected={dateRange[0]} // startDate
            startDate={dateRange[0]}
            endDate={dateRange[1]}
            onChange={(daterange) => {
              console.log(daterange)

            }}
            {...props}
        />

Answer 1

selected 属性用于在与日期选择器交互时保留 select 已经 select 的日期。如果你不添加这个道具，当你点击日期选择器时，它总是从 startDate.

重新开始

如果我运行这个：

() => {
  const [dateRange, setDateRange] = useState([new Date(), new Date()])
  return (
    <DatePicker
       startDate={dateRange[0]}
       endDate={dateRange[1]}
       onChange={(daterange) => {
          console.log(daterange)
       }}
     />
  );
};

onChange 始终打印您 select 编辑的日期，默认为午夜时间。不仅如此，如果您再次单击日期选择器，您会看到该选择器 returns 到 startDate 的值（即使您在之前的交互中 select 编辑了不同的日期）。

所以 selected 道具是，让我说，“强制性”（也是因为如果你不添加它，你将无法在 DatePicker 文本区域中看到你 selected 的日期):

现在，如果您想编辑 startDate 和 endDate，您应该以这种方式使用 selectsRange 属性：

() => {
  const [dateRange, setDateRange] = useState([new Date(), new Date()])
  return (
    <DatePicker
       selected={dateRange[0]}
       startDate={dateRange[0]}
       endDate={dateRange[1]}
       onChange={(daterange) => {
          setDateRange(daterange);
          console.log(daterange);         
       }}
       selectsRange
     />
  );
};

现在 datepicker 允许您 select 一个时间间隔并且 onChange 每次您 select 一个日期时打印：所以，当您 select 时间间隔的开始日期你会看到：

[Fri Apr 01 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale), null]

结束日期是 null。然后，当您 select 间隔的结束日期时，您将看到：

[Fri Apr 01 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale), Fri Apr 22 2022 11:15:55 GMT+0200 (Ora legale dell’Europa centrale)]

为什么我应该添加 selected 属性以在具有范围的 react-datepicker 中获取小时、分钟、秒信息？

Why I should add attribute selected to get hour, min, second information in react-datepicker with range?

reactjs

react-datepicker