mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

[pickers] Selected days not highlighted when using prop showDaysOutsideCurrentMonth

Open TiagoPortfolio opened this issue 2 years ago • 0 comments

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: DateRangePicker with showDaysOutsideCurrentMonth prop

Steps:

  1. Select the range 29/01/2023 - 04/02/2023

Current behavior 😯

When January is in view, only the days in January are highlighted. When February is in view, only the days in February are highlighted.

Expected behavior 🤔

When using DateRangePicker with the showDaysOutsideCurrentMonth prop, all selected days should be highlighted even if they are in different months

Context 🔦

I want the user to be able to automatically select a week after clicking on a day. When a day is clicked, the week including that day will be selected because in my context it only makes sense to select weeks, hence I used showDaysOutsideCurrentMonth. I am using DateRangePicker for this, not sure if there is a better component.

Your environment 🌎

npx @mui/envinfo
  System:
    OS: macOS 13.1
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.2
  npmPackages:
    @emotion/react: 11.10.4 => 11.10.4
    @emotion/styled: 11.10.4 => 11.10.4
    @mui/icons-material: 5.11.0 => 5.11.0
    @mui/lab: 5.0.0-alpha.113 => 5.0.0-alpha.113
    @mui/material: 5.11.1 => 5.11.1
    @mui/system: 5.11.1 => 5.11.1
    @mui/types: 7.2.3 => 7.2.3
    @mui/x-data-grid: 6.0.0-alpha.14 => 6.0.0-alpha.14
    @mui/x-data-grid-generator: 6.0.0-alpha.14 => 6.0.0-alpha.14
    @mui/x-data-grid-premium: 6.0.0-alpha.14 => 6.0.0-alpha.14
    @mui/x-data-grid-pro: 6.0.0-alpha.14 => 6.0.0-alpha.14
    @mui/x-date-pickers: 6.0.0-alpha.15 => 6.0.0-alpha.15
    @mui/x-date-pickers-pro: 6.0.0-alpha.15 => 6.0.0-alpha.15
    @types/react: 18.0.27 => 18.0.27
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: 5.3.5 => 5.3.5
    typescript: 5.0.0-dev.20230217 => 5.0.0-dev.20230217

Used Chrome

Order ID 💳 (optional)

54728

TiagoPortfolio avatar Feb 24 '23 14:02 TiagoPortfolio