在ReactJS中取数时自定义日期查询

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const CustomDateQuery = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartDateChange = (date) => {
    setStartDate(date);
  };

  const handleEndDateChange = (date) => {
    setEndDate(date);
  };

  const handleQuery = () => {
    // 根据选择的起始日期和结束日期进行查询操作
    // 这里可以调用后端API，传递选择的日期作为参数
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);
  };

  return (
    <div>
      <DatePicker
        selected={startDate}
        onChange={handleStartDateChange}
        placeholderText="选择起始日期"
      />
      <DatePicker
        selected={endDate}
        onChange={handleEndDateChange}
        placeholderText="选择结束日期"
      />
      <button onClick={handleQuery}>查询</button>
    </div>
  );
};

export default CustomDateQuery;