[DataPicker] Allow for passing undefined startDate, endDate props when enableRangeSelect is set to true

[Juliakas]

Feature

Allow for passing undefined startDate, endDate props to DatePicker component when enableRangeSelect is set to true. This allows for not having any initial date range set.

That being said, if there is no initial range set then it would be nice to force calendar to navigate to somewhere else than "today", DatePicker could have initialFocusedDay prop or something like that.

Examples

interface DateRange {
  startDate: Date;
  endDate: Date;
}

const MyComponent = ({ limits }: { limits: DateRange }) => {

  const [dateRange, setDateRange] = useState<DateRange>();

  return <DatePicker 
    enableRangeSelect
    startDate={dateRange?.startDate}
    endDate={dateRange?.endDate}
    initialFocusedDay={limits.startDate}
    onChange={(startDate, endDate) => setDateRange({ startDate, endDate })}
    ....
  />
}

[mayank99]

I think we can support undefined in startDate and endDate, since it almost feels like a bug if undefined doesn't work.

However, I just want to note that date range selection is not recommended. For better UX, we instead recommend using two separate date fields for "Start date" and "End date". In the future, the enableRangeSelect prop might be deprecated.

[r100-stack]

I think we can support undefined in startDate and endDate, since it almost feels like a bug if undefined doesn't work.

Support for setting startDate and endDate as undefined has now been added to 3.16.0 🚀

To keep the behavior simple, both of those props have to either be Date or undefined. Passing Date to just one of them is not allowed. If this ever happens, a dev-only console warning is shown:

---

But as @mayank99 mentioned, instead of the range DatePicker, we actually recommend two separate DatePickers for better UX. (More info with examples)

[Juliakas]

I think we can support undefined in startDate and endDate, since it almost feels like a bug if undefined doesn't work.

However, I just want to note that date range selection is not recommended. For better UX, we instead recommend using two separate date fields for "Start date" and "End date". In the future, the enableRangeSelect prop might be deprecated.

It looked like a good pattern tbh, another example could be how booking.com allows date range selecting which I find convenient and less clicks:

Also in linked example implementation is a bit more bulky, we have something like this going on right now:

Other than that thanks for implemting this undefined start/endDate feature