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

【问题标题】：Reactjs How to get the value of Start date and End date?Reactjs如何获取开始日期和结束日期的值？
【发布时间】：2021-08-07 18:57:37
【问题描述】：

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

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>

【问题讨论】：

您使用的是同步融合组件吗？你能把你的代码的可执行文件分享到codesandbox吗？
是的，我正在使用同步融合
遗憾的是我不知道如何使用代码框
你在这个组件的顶部导入了什么来使用DateRangePickerComponent？
这能回答你的问题吗？ How to get the value of DateRangePicker (syncfusion) on react js

标签： reactjs syncfusion syncfusion-calendar

【解决方案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;

【讨论】：