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

Question

我该如何获取开始日期和结束日期的值？我使用以下代码：

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>

- user15404864

---

很遗憾，我不知道如何使用 CodeSandbox。 - user15404864

你在这个组件的顶部导入了什么，以便使用 DateRangePickerComponent？ - Majid M.

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

这个回答解决了你的问题吗？如何在ReactJS中获取DateRangePicker（syncfusion）的值。 - Majid M.

@MajidMohammadi ，不，我只想单独获取开始和结束日期。 - user15404864

Answer 1

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

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; 

- Majid M.