可以通过以下步骤实现:
npm install react react-dom
npm install react-dates
import React from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
class ScrollableContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
focusedInput: null
};
}
render() {
return (
<div style={{ overflowY: 'scroll', height: '400px' }}>
<DateRangePicker
startDate={this.state.startDate}
endDate={this.state.endDate}
onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
focusedInput={this.state.focusedInput}
onFocusChange={focusedInput => this.setState({ focusedInput })}
/>
</div>
);
}
}
function App() {
return (
<div>
<h1>使用React-dates的DateRangePicker</h1>
<ScrollableContainer />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
这样,你就可以在滚动容器中使用React-dates的DateRangePicker了。用户可以通过选择开始日期和结束日期来选择一个日期范围。React-dates库提供了丰富的选项和自定义功能,以满足不同的需求。
推荐的腾讯云相关产品:腾讯云服务器(CVM),腾讯云对象存储(COS)
领取专属 10元无门槛券
手把手带您无忧上云