react-datepicker 选择一天的时间范围

Question

我正在使用 react-datepicker 构建一个预订系统组件。用户可以选择一天并选择开始时间和结束时间（开始和结束时间只能在同一天）。

我想只显示一个日期选择器，然后显示两个时间选择器，但只能获得两个完整的组件（日期+时间）。

我的代码：

const StartTime () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

const EndTime () => {
  const [endDate, setEndDate] = useState(new Date());
  return (
    <DatePicker
      selected={endDate}
      onChange={date => setEndDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

Answer 1

您可以使用 1 个仅限日期的选择器和两个仅限时间的选择器。 您需要验证开始时间在结束之前。

仅日期选择器

   const date () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
      );
    };

时间选择器

const EndTime() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={15}
      timeCaption="Time"
      dateFormat="h:mm aa"
    />
  );
};