Reactjs How to get the value of Start date and End date?

Question

How can I get the value of start date and end date? I use:

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

This is a duplicate question because I want to get the start and end date separately.

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>

Answer 1

You can access the dates separately with startDate and endDate of change event from 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;