rangepicker获取开始日期和结束日期react写法

在React中，你可以使用第三方库如`Material-UI`或`date-fns`结合`DatePicker`组件来自行创建范围选择器（RangePicker）。下面是一个简单的例子，使用`@material-ui/pickers`库：

首先，你需要安装必要的依赖：

npm install @material-ui/core @material-ui/pickers date-fns

然后，在组件中引入并使用`DateRangePicker`：

import React from 'react';
import { DatePicker, DateTimeFormat } from '@material-ui/pickers';
import moment from 'date-fns';

function CustomDateRangePicker({ onChange }) {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const onDatesChange = (dates) => {
    const start = dates[0];
    const end = dates[1] || moment().endOf('day');
    onChange([start, end]);
  };

  return (
    <div>
      <DatePicker
        label="Start Date"
        inputType="date"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        disablePast
        maxDate={endDate}
      />
      <DatePicker
        label="End Date"
        inputType="date"
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        minDate={startDate}
        disableFuture
      />
    </div>
  );
}

// 使用时：
<CustomDateRangePicker onChange={(dates) => console.log(dates)} />

这个例子中，我们定义了两个`DatePicker`组件，它们会联动更新彼此的选择范围。当用户更改其中一个日期时，另一个日期会被限制在合理的范围内。