Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
7.89k stars 2.23k forks source link

Months hovered inside range are not highlighted (using showMonthYearPicker) #3954

Open diegomd opened 1 year ago

diegomd commented 1 year ago

Describe the bug By using the datepicker in range mode (two inputs or single input) and with showMonthYearPicker configuration, after select the start date, while choosing the end date, the months inside range to be selected are not highlighted. Just after the selection of end date, the entire month range became highlighted.

Also, the class react-datepicker__month--in-selecting-range is not applied during this process, in the months inside the range that is about to be selected.

To Reproduce Steps to reproduce the behavior:

  1. Go to "Range Month Picker" of React Date Picker documentation
  2. Click on first input (start date)
  3. Select the month "Jul"
  4. Click on second input (end date)
  5. Hover under the months "Aug", "Sep", "Oct", "Nov" or "Dez"
  6. Realize any of the hovered months changes its style

Expected behavior Durgin the step (6) above, the months hovered should have a different style, and should have the CSS class react-datepicker__month--in-selecting-range applied. The behavior should be the same without the showMonthYearPicker configration. To check this out:

  1. Go to "Date Range" of React Date Picker documentation
  2. Click on first input (start date)
  3. Select the date 2014/02/10
  4. Click on second input (end date)
  5. Hover under the any date after this one (e.g., 2014/02/11, 2014/02/12, 2014/02/13)
  6. Realize the dates hovered have a highlighted style, showing they are inside the range
  7. Also, the class react-datepicker__day--in-selecting-range is applied in dates inside range

Screenshots

Desktop (please complete the following information):

github-actions[bot] commented 4 weeks ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.