Reactjs 如何获取开始日期和结束日期的值？

如何解决Reactjs 如何获取开始日期和结束日期的值？

如何获取开始日期和结束日期的值？我使用：

import { DaterangePickerComponent } from '@syncfusion/ej2-react-calendars';

这是一个重复的问题，因为我想分别获取开始和结束日期。

import { DaterangePickerComponent } from '@syncfusion/ej2-react-calendars';
import { makeStyles } from '@material-ui/core/styles';

const [startdate,setStartDate] = useState("");
const [enddate,setEndDate] = useState("");
const onChangedate = (props) => {
  const stateDate = props.startDate;
  const endDate = props.endDate;
  setStartDate(stateDate)
  setEndDate(endDate)
};

const handleUpdateButton = async ()=> {
  console.log(startdate,enddate) // I just want to print here the start date and end date
}

<Grid item xs={12} sm={6} md={6} lg={6} style={{padding: 15,paddingBottom: 0,alignItems: 'center'}}>
  <DaterangePickerComponent id="daterangepicker" change={onChangedate} placeholder='Select a range' style={{paddingTop: 10,fontSize: 16}}/>
</Grid>

<Grid item xs={12} style={{padding: 8}}>
 <Button onClick={handleUpdateButton} variant="contained"color="primary" fullWidth>
   Apply Filters
 </Button>
</Grid>

解决方法

您可以通过 startDate 和 endDate 的 change 事件分别访问来自 DateRangePickerComponent 的日期：

import { useState } from "react";
import { DateRangePickerComponent } from "@syncfusion/ej2-react-calendars";

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

  function convertDate(inputFormat) {
    function pad(s) { return (s < 10) ? '0' + s : s; }
    var d = new Date(inputFormat)
    return [pad(d.getMonth()+1),pad(d.getDate()),d.getFullYear()].join('-')
  }

  const onChange = (e) => {
    let startDate = convertDate(e.startDate);
    let endDate = convertDate(e.endDate);
    setStartDate(startDate);
    setEndDate(endDate);
  };

  return (
    <div className="container">
      <DateRangePickerComponent change={onChange} />
      <div>
        {startDate} - {endDate}
      </div>
    </div>
  );
};

export default App;