Javascript react datepicker选择一天的时间范围
我正在使用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
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(中欧夏季时间)
我只需要时间而不是一天