react 取出的时间段分别都是一个数组 把数组拼成字符串 时间转换为 yyyy-mm-dd hh:mm:ss 在分别传给对应的变量 用函数组件ts实现

以下是一个用函数组件和 TypeScript 实现的示例代码：

import React, { useState } from "react";

interface Props {
  startDate: string;
  endDate: string;
}

const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const DateRangePicker: React.FC<Props> = ({ startDate, endDate }) => {
  const [start, setStart] = useState<string>(startDate);
  const [end, setEnd] = useState<string>(endDate);

  const handleDateChange = (dates: Date[]): void => {
    const [newStart, newEnd] = dates.map(formatDate);
    setStart(newStart);
    setEnd(newEnd);
  };

  return (
    <div>
      <p>Start Date: {start}</p>
      <p>End Date: {end}</p>
      {/* Your date range picker component goes here */}
    </div>
  );
};

export default DateRangePicker;

在这个组件中，我们首先定义了一个 `Props` 接口，它包含了 `startDate` 和 `endDate` 两个属性，它们都是字符串类型。

在组件内部，我们使用了 React 自带的 `useState` hook 来管理组件的状态。我们将 `start` 和 `end` 两个变量初始化为 `startDate` 和 `endDate`。当用户选择新的日期范围时，我们会通过 `handleDateChange` 函数将新的起始日期和结束日期转换为字符串，并更新组件的状态。

最后，我们将 `start` 和 `end` 两个变量显示在组件中。你需要替换这里的代码，将你自己的日期范围选择器组件放在相应的位置。