diff --git a/.changeset/wet-ears-scream.md b/.changeset/wet-ears-scream.md new file mode 100644 index 00000000000..86e05fb9a75 --- /dev/null +++ b/.changeset/wet-ears-scream.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +`DatePicker` with `enableRangeSelect` now allows `startDate` and `endDate` to *both* be `undefined` (e.g. when there is no initial range). Passing `Date` to just *one* of them is not allowed. diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 9b5b873b8c0..304c14ddaba 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -13,6 +13,7 @@ import { Box, useId, useLayoutEffect, + useWarningLogger, } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; import { IconButton } from '../Buttons/IconButton.js'; @@ -166,8 +167,8 @@ export type DateRangePickerProps = } | { enableRangeSelect: true; - startDate: Date; - endDate: Date; + startDate?: Date; + endDate?: Date; onChange?: (startDate: Date, endDate: Date) => void; }; @@ -285,6 +286,18 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { ...rest } = props; + const logWarning = useWarningLogger(); + + if (process.env.NODE_ENV === 'development') { + const onlyOneRangePropPassed = + (!!startDate ? 1 : 0) + (!!endDate ? 1 : 0) === 1; + if (enableRangeSelect && onlyOneRangePropPassed) { + logWarning( + '`DatePicker` with `enableRangeSelect` needs *both* `startDate` and `endDate` to either be `Date` or `undefined`. Passing `Date` to just one of them is not allowed.', + ); + } + } + const monthNames = localizedNames?.months ?? defaultMonths; const shortDays = localizedNames?.shortDays ?? defaultShortDays; const longDays = localizedNames?.days ?? defaultLongDays;