Я тоже столкнулся с этой проблемой и не нашел ни одного ресурса в интернете. Наконец то, что я заметил, что вы не можете реализовать какую-либо библиотечную функцию, используя jquery, в реактивный проект. Вы должны поддерживать способ реагирования, что означает, что вы должны использовать библиотеку реагирования.
первая установка daterangepicker с использованием npm
npm установить реагирующее средство выбора даты --save
затем добавьте эти две строки в ваш файл, куда вы хотите добавить daterangepicker
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
А затем в своем классе определите код события daterangepicker, который я использовал по-своему, посмотрите, поможет ли вам.
class Search extends Component {
constructor(props){
super(props);
this.state = {
startDate: '',
endDate: ''
};
this.handleStateDateChange = this.handleStateDateChange.bind(this);
this.handleEndDateChange = this.handleEndDateChange.bind(this);
}
handleStateDateChange(date){
this.setState({
startDate: date
});
}
handleEndDateChange(date){
this.setState({
endDate: date
});
}
в конце в функцию рендеринга просто вызовите модуль DatePicker
render() {
return (
<div>
{/* Date Picker Start */}
<div class="container-fluid">
<div class="Datecontent">
<label><b>Date Range Search</b></label>
<br />
<DatePicker
selected={this.state.startDate}
onChange={this.handleStateDateChange}
className='form-control'
placeholderText='Start Date'
/>
<DatePicker
selected={this.state.endDate}
onChange={this.handleEndDateChange}
className='form-control'
placeholderText='End Date'
/>
</div>
</div>
{/* Date Picker End */}
</div>
);
}
}
export default Search;
Это запустить проект. Спасибо.