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

Javascript react datepicker选择一天的时间范围,javascript,reactjs,react-datepicker,Javascript,Reactjs,React Datepicker,我正在使用react datepicker构建预订系统组件。用户可以选择一天,并选择开始时间和结束时间(开始时间和结束时间只能在同一天) 我只想显示一个日期选择器和两个时间选择器,但只能获得两个完整组件(日期+时间) 我的代码: const StartTime () => { const [startDate, setStartDate] = useState(new Date()); return ( <DatePicker selected={star

我正在使用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"
    />
  );
};
const StartTime()=>{
const[startDate,setStartDate]=useState(新日期());
返回(
设置开始日期(日期)}
showTimeSelect
timeFormat=“HH:mm”
时间间隔={15}
timeCaption=“时间”
dateFormat=“mm d,yyyy h:mm aa”
/>
);
};
常量结束时间()=>{
const[endDate,setEndDate]=useState(new Date());
返回(
setEndDate(日期)}
showTimeSelect
timeFormat=“HH:mm”
时间间隔={15}
timeCaption=“时间”
dateFormat=“mm d,yyyy h:mm aa”
/>
);
};

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

仅日期选择器

   const date () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
      );
    };
const date()=>{
const[startDate,setStartDate]=useState(新日期());
返回(
设置开始日期(日期)}/>
);
};
时间选择器

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"
    />
  );
};
const EndTime()=>{
const[startDate,setStartDate]=useState(新日期());
返回(
设置开始日期(日期)}
showTimeSelect
showTimeSelectOnly
时间间隔={15}
timeCaption=“时间”
dateFormat=“h:mm aa”
/>
);
};

主页上的一些示例应该能让您了解您想要的内容。这仍然给了我一些类似于
太阳2020年10月4日16:45:00 GMT+0200(中欧夏季时间)
我只需要时间而不是一天