react-datepicker选择单日时间范围

Question

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

我只想展示一个datepicker和两个timepicker，但只能得到两个完整的组件(date+time)。

我的代码：

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"
    />
  );
};