Range DatePicker's startDate & endDateprops allow undefined

[r100-stack]

Changes

Fixes #2333. Range DatePicker's startDate and endDate props allow undefined or not passing any value. Additionally, either both have to be passed or neither have to be passed. Passing just one of those two props is not allowed.

But as @mayank99 mentioned, we still recommend users to have two separate DatePickers instead of a range DatePicker. Similar: #1297 (comment).

---

After this change, I noticed that if a user passes one of the two, it could lead to some unexpected behavior. E.g. just passing startDate but no endDate may cause some unexpected issues:

Demo of the unexpected issues

Demo.mov

import * as React from 'react';
import { DatePicker } from '@itwin/itwinui-react';

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

export default function App() {
  const limits: DateRange = {
    startDate: new Date(2024, 10, 3, 15),
    endDate: new Date(2024, 10, 7, 17),
  };

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

  return (
    <DatePicker
      enableRangeSelect
      startDate={dateRange?.startDate}
      // endDate={dateRange?.endDate}
      showDatesOutsideMonth={false}
      onChange={(startDate, endDate) => {
        console.log('CHANGING', { startDate, endDate });
        setDateRange({ startDate, endDate });
      }}
    />
  );
}

I'm not sure if this behavior is expected. Experimenting with other changes to see how to not get these unexpected changes. Making this PR ready to review before I finish my experimentation to get some more thoughts on this behavior and because it's a small PR. Solved after #2334 (comment)

Testing

• Confirmed that no errors come up after making these changes to the types.
• Confirmed that no initial range is shown when no startDate or endDate is passed.

Testing code based on the user's example

import * as React from 'react';
import { DatePicker } from '@itwin/itwinui-react';

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

export default function App() {
  const limits: DateRange = {
    startDate: new Date(2024, 10, 3, 15),
    endDate: new Date(2024, 10, 7, 17),
  };

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

  return (
    <DatePicker
      enableRangeSelect
      startDate={dateRange?.startDate}
      endDate={dateRange?.endDate}
      showDatesOutsideMonth={false}
      onChange={(startDate, endDate) => {
        console.log('CHANGING', { startDate, endDate });
        setDateRange({ startDate, endDate });
      }}
    />
  );
}

Docs

Added changeset