I am trying to filter data between two dates and display it in a table. Currently, my table shows all the data from the database but I want the user to be able to select from that date to this date, and data between the specified dates to be displayed in the table. My code example
import React from "react";
import APIHandler from "../utils/APIHandler";
import _ from "lodash";
import moment from "moment";
import DatePicker from "react-datepicker";
import { initiateGetTransactions } from "../components/Transactions";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
class FarmerStatementComponent extends React.Component {
constructor(props) {
super(props);
console.log(props.match.params.id);
}
state = {
errorRes: false,
errorMessage: "",
btnMessage: 0,
sendData: false,
orders: [],
startDate: new Date(),
endDate: new Date(),
dataLoaded: false,
formSubmitted: false,
name: "",
id: "",
};
componentDidMount() {
this.fetchFarmerData().then(response => {
console.log(response.data);
this.setState({
orders: response.data
});
});
}
handleStartDateChange = (date) => {
this.setState({
startDate: date
});
}
handleEndDateChange = (date) => {
this.setState({
endDate: date
});
}
handleSubmit = (event) => {
debugger;
event.preventDefault();
const data = { startDate:this.state.startDate, endDate:this.state.endDate};
}
async fetchFarmerData() {
var apihandler = new APIHandler();
var farmerdata = await apihandler.fetchFarmerDetails(this.props.match.params.id);
console.log(farmerdata);
this.setState({ orders: farmerdata.data.data.orders });
this.setState({ name: farmerdata.data.data.name });
this.setState({ phone: farmerdata.data.data.phone });
this.setState({ dataLoaded: true });
}
print() {
window.print();
}
render() {
return (
<section className="content">
<div className="container-fluid">
<div className="block-header">
<h2>FARMER STATEMENT</h2>
</div>
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="card">
<div className="header">
<h2>
{this.state.name}'S STATEMENT
</h2>
<div className="header-dropdown m-r--5">
<h2>
{this.state.id}
</h2>
</div>
</div>
<div className="body">
<div className="table-responsive">
<div id="DataTables_Table_1_wrapper" className="dataTables_wrapper form-inline dt-bootstrap">
<div className="dt-buttons">
<a className="dt-button buttons-csv buttons-html5" tabIndex="0" aria-controls="DataTables_Table_1" href="#">
<span>
<ReactHTMLTableToExcel
className="btn btn-success"
tabIndex="0"
aria-controls="DataTables_Table_1"
table="DataTables_Table_1"
filename="FarmerStatement"
sheet="Sheet"
buttonText="Excel"
/>
</span>
</a>
<a className="dt-button buttons-print" tabIndex="0" aria-controls="DataTables_Table_1" href="#" onClick={this.print}>
<span onClick={() => this.print()}>Print</span>
</a>
<br/>
<form onSubmit={this.handleSubmit}>
<button type="submit" className="btn btn-info" >
Generate Report
</button>
</form>
</div>
<div id="DataTables_Table_1_filter" className="dataTables_filter">
<form onSubmit={this.handleSubmit}>
<label>
<i className="material-icons">date_range</i>Start Date:
<DatePicker
selected={this.state.startDate}
className="form-control datepicker"
name="Start Date: 30/07/2022"
aria-controls="DataTables_Table_1"
value={this.state.startDate}
onChange={this.handleStartDateChange}
/>
</label>
<br/>
<label>
<i className="material-icons">date_range</i>End Date:
<DatePicker
selected={this.state.endDate}
className="form-control datepicker"
name="End Date: 30/07/2022"
aria-controls="DataTables_Table_1"
value={this.state.endDate}
onChange={this.handleEndDateChange}
/>
</label>
</form>
</div>
{this.state.dataLoaded === false ? (
<div className="text-center">
<div className="preloader pl-size-xl">
<div className="spinner-layer">
<div className="circle-clipper left">
<div className="circle"></div>
</div>
<div className="circle-clipper right">
<div className="circle"></div>
</div>
</div>
</div>
</div>
) : ""}
<table className="table table-bordered table-striped table-hover dataTable js-exportable" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
<thead>
<tr role="row">
<th className="sorting_asc" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style={{width: "40px"}}>
#ORDER NO
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Position: activate to sort column ascending" style={{width: "150px"}}>
CUSTOMER NAME
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Office: activate to sort column ascending" style={{width: "101px"}}>
KILOS
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Age: activate to sort column ascending" style={{width: "100px"}}>
PRICE PER KG
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Start date: activate to sort column ascending" style={{width: "115px"}}>
ORDERED ON
</th>
</tr>
</thead>
<tbody>
{this.state.orders.map((farmer) => (
<tr role="row" className="odd" key={farmer.id}>
<td className="sorting_1">{farmer.id}</td>
<td className="sorting_1">{farmer.customer.name}</td>
<td className="sorting_1">{farmer.kgs}</td>
<td className="sorting_1">{farmer.price}</td>
<td className="sorting_1">{new Date(farmer.added_on).toLocaleString()}</td>
</tr>
))}
</tbody>
</table>
<div className="dataTables_info" id="DataTables_Table_1_info" role="status" aria-live="polite">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default FarmerStatementComponent;
I've been stuck her for weeks any help, or idea to go about it will be highly appreciated