小编Jub*_*b10的帖子

我想创建一个日期范围组件，将开始日期和结束日期放入单个输入中。我尝试使用此处的示例https://reactdatepicker.com/#example-date-range-for-one-datepicker但它似乎没有显示 endDate。我已经设置了一个自定义输入来显示这两个值，但我不知道如何使用 datePicker 中的单个 onChange 属性来更新它们。我相信这导致组件失败并出现 RangeError: invalid time value。

const CustomDatePicker = (props) => {
  const {
    className,
    startDateId,
    endDateId,
    startLabel,
    endLabel,
    displayFormat,
    onStartDateChange,
    onEndDateChange,
    locale,
    startDate,
    endDate,
  } = props

const CustomInput = ({ value, onClick}) => {
    return 
     
        <input
          className="my-input"
          type="text"
          onClick={onClick}
          value={`${startDate} - ${endDate}`}
        />
      </div>
   
    )

return <DatePicker
            id={startDateId}
            selected={startDate}
            selectsRange
            startDate={startDate}
            endDate={endDate}
            placeholderText={placeholder}
            dateFormat={displayFormat}
            onChange={onStartDateChange}
            locale={selectLocale(locale)}
            customInput={<CustomInput />}
          />
}

仍然围绕泛型我的头所以帮助将不胜感激。