如何解决react-datepicker选择一天的时间范围
我正在使用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"
/>
);
};
解决方法
您可以使用1个仅日期选择器和2个仅时间选择器。 您需要验证开始时间是在结束之前。
仅日期选择器
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"
/>
);
};
仅时间选择器
import UIKit
class GameViewController: UIViewController
{
@IBOutlet weak var scoreLabel:UILabel?
@IBOutlet weak var timeLabel:UILabel?
@IBOutlet weak var numberLabel:UILabel?
@IBOutlet weak var inputField:UITextField?
override func viewDidLoad() {
super.viewDidLoad()
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。