hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.57k stars 658 forks source link

maxDate attribute can be bypassed from end user in DateRangePicker #627

Open mCharatz opened 7 months ago

mCharatz commented 7 months ago

maxDate attribute can be bypassed from end user in DateRangePicker

Selecting a date range in DateRangePicker by using the 'days starting today' option from the UI selects the disabled dates beyond the setted maxDate

[BUG] Bug Reproduce Steps

Step1) Use a DateRangePicker like this with maxDate initialized

const [state, setState] = useState([
  {
    startDate: new Date(),
    endDate: addDays(new Date(), 7),
    key: 'selection'
  }
]);

<DateRangePicker
  onChange={item => setState([item.selection])}
  showSelectionPreview={true}
  moveRangeOnFirstSelection={false}
  months={2}
  ranges={state}
  direction="horizontal"
  maxDate={new Date()}
/>;

Step2)

Use the 'days starting today' from the rendered UI and choose some days forward. You can see that the DateRangePicker selects the disabled dates in the future

[BUG] Expected behaviour

When maxDate is setted it was supposed not to be able to select dates after maxDate

Environment

Package Version: 1.4.0 React version: 18.2.0 Node version: 18.14.0 Browser: Mozila Firefox, Chrome