title: How can I add a date range with a single input to react-datepicker
body: <p>I want to create a date range component that will fit both start and end dates into a single input. I tried using the example here <a href="https://reactdatepicker.com/#example-date-range-for-one-datepicker" rel="nofollow noreferrer">https://reactdatepicker.com/#example-date-range-for-one-datepicker</a> but it doesnt seem to display the endDate. I've set up a custom input to display both values, but I don't know how to update them both with a single onChange prop in my datePicker. I believe this has caused the component to fail with a RangeError: invalid time value.</p>
  <pre><code>const CustomDatePicker = (props) =&gt; {
    const {
      className,
      startDateId,
      endDateId,
      startLabel,
      endLabel,
      displayFormat,
      onStartDateChange,
      onEndDateChange,
      locale,
      startDate,
      endDate,
    } = props
  
  const CustomInput = ({ value, onClick}) =&gt; {
      return 
       
          &lt;input
            className=&quot;my-input&quot;
            type=&quot;text&quot;
            onClick={onClick}
            value={`${startDate} - ${endDate}`}
          /&gt;
        &lt;/div&gt;
     
      )
  
  return &lt;DatePicker
              id={startDateId}
              selected={startDate}
              selectsRange
              startDate={startDate}
              endDate={endDate}
              placeholderText={placeholder}
              dateFormat={displayFormat}
              onChange={onStartDateChange}
              locale={selectLocale(locale)}
              customInput={&lt;CustomInput /&gt;}
            /&gt;
  }
  </code></pre>