How to select only startDate or endDate if one is already selected

[davidbejarcaceres]

Hi,

I´m trying to use the component as a filter startDate/endDate, when I´m having a "startDate" and don´t want to add endDate, I´m using null as a value for endDate, but If I want to add an endDate without resetting the startDate, I want to add just the new Date, not selecting startDate and endDate range all over again.

is it possible?

I think one way to do it is execute onChange function for startDate and also for endDate, not just for the range, I was checking on the react-calendar, this can be donde with allowPartialRange={true} prop, but we have no option to do it or access any props to the calendar in react-daterange-picker.

[wojtekmaj]

If you provide only one value to React-DateRange-Picker, it will pick it up. You can also use minDate = startDate, so that users won't be able to select date before the startDate (effectively making startDate the endDate).

[sandeep-rajbhandari]

Is it possible to keep startdate and set enddate as null?

[davidbejarcaceres]

Is it possible to keep startdate and set enddate as null?

Yes, you can use null, by default I´m setting startDate to actual current date Date.now(), but null for end date, because I don´t want to set a limit.

But I want to open the calendar only to select the endDate, not the date range again (startTime and endTime).

[wojtekmaj]

If you are in a situation as on the screenshot, Calendar should open with one date already entered, so the user only needs to click once to finish the date range.

[davidbejarcaceres]

@wojtekmaj it´s no workig like that, unfortunately if startDate is already selected, and try to open the calendar again to select only endDate, I still need to select a range, and by doing that resetting the startDate always selects range of dates (that´s why component´s name "react-daterange-picker"), even if only need to select endDate (startDate already present "value[0]").

That´s happening because prop "selectRange" is used for Calendar on line 261, it´s not conditionally used from a parent component prop:

react-daterange-picker/src/DateRangePicker.jsx

Lines 255 to 265 in e0b550c

	return (
	<Fit>
	<div className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}>
	<Calendar
	className={calendarClassName}
	onChange={this.onChange}
	selectRange
	value={value || null}
	{...calendarProps}
	/>
	</div>

I found two solutions in case someone wants to implement something similar:

1. Add a new prop useRangeDates (boolean by default true), and from parent component check if you only need single Date instead of a range of Dates:

2. For a simple solution, logic is into daterange-picker component instead of parent (the one I´m using), I don´t need to control from parent, if we already have a startDate and a null endDate, it will check for this condition, and will call onChange for single date, in this case, endDate:

The first solution just adds more control to the component from parent component, if not used useRangeDates={false} prop, will be working the same way as if before. The second solution instead, does change the internal logic of the component, it will override the "range" selection in case startDate is already present and endDate = null.

[wojtekmaj]

This will work:

function Test() {
  const [value, onChange] = useState([new Date()]);
  const startDateOrRange = value.length === 1 ? value[0] : value;
  return (
    <DateRangePicker minDate={value[0]} onChange={onChange} value={startDateOrRange} />
  );
}

Unfortunately, after you select the range once, we're back to default experience, so the user can select another range freely. I'm afraid nothing more can be done with this package. Too much of an edge case. You should be able to do that with 2 React-Date-Picker components, though.

[jonasgroendahl]

Add variable for selectRange and you should be good :)

  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);
  const [selectRange, setSelectRange] = useState(true);

 const onChange = (dates) => {
    console.log('onChange triggered', dates);

    if (Array.isArray(dates)) {
      const [start, end] = dates;
      setStartDate(start);
      setEndDate(end);

      setSelectRange(false);
    } else {
      setEndDate(dates);
    }
  };

         <DatePicker
                endDate={endDate}
                inline={true}
                minDate={new Date()}
                onChange={onChange}
                selected={new Date()}
                selectRange={selectRange}
                showWeekNumbers={true}
                startDate={new Date()}
              />

[Aquib-Alvi-au45]

Hii,
I have query regarding react-daterange-picker , I am trying to disable end date from selecting because, I don't want user to select same start and end date if its not the same date then user can select end date