Description
react-dates version
react-dates@21.8.0
Describe the bug
Using isOutsideRange
prop will completely remove an invalid date when a date outside the range is manually typed in. This prevents us from handling invalid inputs with validation schemas like Yup and creating better error messaging experiences for our app.
Source code (including props configuration)
We recommend checking out this CodeSandbox to see the other libraries we use in conjunction with SDP.
Steps to reproduce the behavior:
<SingleDatePicker
name={name}
focused={isDatePickerOpen}
onFocusChange={({ focused }) => setIsDatePickerOpen(focused)}
date={value}
onClose={() => trigger("date")}
onDateChange={(date) => {
onChange({ target: { name, value: date } });
}}
numberOfMonths={1}
isOutsideRange={(day) =>
isInclusivelyBeforeDay(
moment(day).startOf("day"),
moment().startOf("day").subtract(1, "days")
) ||
isInclusivelyAfterDay(
moment(day).startOf("day"),
moment().startOf("day").add(31, "days")
)
}
/>
Kapture.2023-09-07.at.12.28.50.mp4
Desktop (please complete the following information):
- OS: MacOS 12.6
- Browser Arc
- Version 1.6.0
Is the issue reproducible in Storybook?
Yes, but it's not apparent what happens under the scenes. The text remains, but the value is not stored.
https://react-dates.github.io/react-dates/?path=/story/sdp-day-props--allows-next-two-weeks-only
Additional context
We're aware this isn't necessarily a bug, but the pattern here feels incorrect. The library should allow developers to decide how they want to handle invalid inputs. Blanket removing all invalid inputs leads to some confusing and vague behaviors.