No way to set styles of selected days in range mode in v9.0

[punit1108]

Description

Currently there is no way to add properties for range start selected date and end selected date, which might be useful in a lot of scenarios which customizing the range selection.

Expected Behavior

There should be a way to style the radiuses of the start and end selected days

Actual Behavior

No styling property currently corresponds to it.

Steps to Reproduce

1. Set mode as "range"

Possible Solution

Solution 1 - --rdp-range_start-selected-border-radius --rdp-range_end-selected-border-radius

Solution 2 - Add a way to add Tailwind styles apart from the selected property, eg, range-start-selected range-end-selected

Screenshots

If applicable, add screenshots or GIFs to help explain your problem.

Your Environment

• React version: 18
• Your Timezone: Indian Standard Time
• Browser [e.g. chrome, safari]:
• Version [e.g. 22]:
• Operating System [e.g. iOS, Windows]:macOS
• Other relevant information:

[gpbl]

Hi @punit1108 thanks for your feedback, it's very important before the release.

First of all, please make sure you use the latest version – as it has been updated recently:

npm install react-day-picker@next

Regarding your question - what are you trying to do? Please be more specific about your issue.

Border radius in stored in by var(--rdp-day_date-border-radius). Maybe something like this would help?

.rdp-selected.rdp-range_start {
   /* set the value here to update the variable when range start: */
   --rdp-day_date-border-radius: 0; 
}

Or:

.rdp-selected.rdp-range_start .rdp-day_date {
  /* here you can override the day date content too */
  border-radius: 0; 
}

[lariane-guerra]

Its possible to change in version v8?

I need almost this (the second photo its from the playground react day pick):

[gpbl]

Hi @lariane-guerra! Here to help...

• please upgrade to react-day-picker@next if you want to use that style
• please share some code so we can help. Thanks.

[lariane-guerra]

Hi, I'll update the version and see.

[lariane-guerra]

I update to the new version, how i get off this o padding between the days?

[lariane-guerra]

import brazilLocale from 'date-fns/locale/pt-BR'

export const NewDatePickerComponent = styled(DayPicker) future styles here

          <NewDatePickerComponent
            locale={brazilLocale}
            mode="range"
            selected={range}
            onSelect={setRange}
            numberOfMonths={1}
          />

locale={brazilLocale}

I found it: If i remove this, work good, but when i put the brazilocale this what i put in print happen.

[lariane-guerra]

To add: in playground when you change to pt-BR, bug happen too.