反应日期选择器日期范围

Posted 2023-02-22

【中文标题】反应日期选择器日期范围

【英文标题】：React-datepicker date range

【发布时间】：2020-10-12 00:06:15

【问题描述】：

我正在为我的应用程序使用 react-typescript。我正在使用React-datepicker 包。我想创建一个全球日期范围组件。所以我可以将它重用于不同的组件。我使用 React-datepicker 的 customInput 进行样式设置并创建了显示时间的按钮。我关注this link 的日期范围逻辑。在日历日期范围内似乎有效，这是image。我想在customInput's 按钮中显示选择开始日期和结束日期。但是一旦我选择了结束日期，两个按钮都会显示结束日期的值。我不知道如何解决它。

这是日期范围组件

import React,  useState  from "react";
import DatePicker,  ReactDatePickerProps  from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import  Button  from "components/buttons";

export interface IDatepicker 
  value: 
    start: Date;
    end: Date;
  ;
  onBlur?: (i: React.FocusEvent<htmlInputElement>) => void;
  onFocus?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onChange: (i: Date) => void;
  buttonComponent?: JSX.Element;
  withPortal?: boolean;
  showTimeSelect?: boolean;
  dateFormat?: string;
  timeFormat?: string;


export default (
  value,
  onChange,
  onBlur,
  onFocus,
  buttonComponent,
  withPortal = false,
  showTimeSelect = false,
  dateFormat = "MMMM d, yyyy h:mm aa",
  timeFormat = "HH:mm"
: IDatepicker) => 

  const handleChange = (date: Date | null) => 
    date && onChange(date);
  ;

  return (
    <div style= display: "flex" >
      <DatePicker
        selected=value.start
        onChange=handleChange
        showTimeSelect=showTimeSelect
        selectsStart
        startDate=value.start
        endDate=value.end
        customInput=
          <Button>
            moment(value.start)
              .format("MMMM Do YYYY")
              .toString()
          </Button>
        
      />
      <div style= color: "black" >-</div>
      <DatePicker
        selected=value.end
        onChange=handleChange
        showTimeSelect=showTimeSelect
        selectsEnd
        startDate=value.start
        endDate=value.end
        minDate=value.start
        customInput=
          <Button>
            moment(value.end)
              .format("MMMM Do YYYY")
              .toString()
          </Button>
        
      />
    </div>

  );
;

这是我正在使用的日期范围组件

import React from "react";

import TimeLine from "components/datepicker";


export default () => 
const [state, setState] = useState(new Date());
  return (
    <div>
      <TimeLine
          value= start: state, end: state 
          onChange=setState
        />
    </div>
  );
;

【问题讨论】：

每次设置结束日期时，开始日期都会被覆盖，因为您在开始和结束日期DatePicker 实例中使用了相同的handleChange 回调。您需要在您所在的州保留两个日期，而不是一个日期，请参阅下面@Mahesh 的答案。

【参考方案1】：

您对开始和结束都使用单一状态值。我认为这是你问题的根本原因。 而不是使用

const [state, setState] = useState(new Date());

我认为您应该将其声明为

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());