Date Range Picker

[Bassonlinho]

Hey I'm trying to style the content of the Date Range Picker. Other components that I use from NextUI I could style with no problem using classNames and hitting exact slot name to override the styles, but with Date Range Picker I'm unable to do so.

In particular, I want to style the selected range buttons, text color in general and remove the shadow from gridHeader.

I tried accessing calendarProps -> classNames and then hitting the classes I want since they're present there (or any other slot), but nothing changed

Am I doing it the right way or?

Thanks in advance!

[wingkwong]

For shadow one, I think it's correct.

For selected range buttons and the text color, use cellButton instead of cell.

cellButton: [
  // default text color
  "text-red-300",
  // selected case
  "data-[selected=true]:bg-secondary",
  "data-[selected=true]:text-secondary-foreground",
  // hover case
  "data-[hover=true]:bg-secondary-50",
  "data-[hover=true]:text-secondary-400",
  // selected and hover case
  "data-[selected=true]:data-[hover=true]:bg-secondary",
  "data-[selected=true]:data-[hover=true]:text-secondary-foreground",
]

[Bassonlinho]

Ah crap, any plan to forward them soon? I thought I was doing something wrong at first but the same pattern I applied to other components and it worked pretty well

[element-software]

I have really struggled with this, the component itself works fine but styling has been a nightmare!

I ended up adding the below classes into my Tailwind custom.css file:

[data-selection-start="true"] {
  @apply bg-red-400;
  @apply rounded-r-medium;
}

[data-selection-end="true"] {
  @apply bg-red-400;
  @apply rounded-l-medium;
}

[data-range-selection="true"]:not([data-selection-start="true"]):not([data-selection-end="true"]) {
  @apply bg-red-400;
  @apply rounded-none;
}

[data-slot="cell"]:hover {
  @apply bg-red-400;
  @apply text-white;
  @apply rounded-full;
}

It gives the below results and includes a simple hover state.

On the <DateRangePicker /> component itself I have the below classnames, which didn't really seem to work except for the calendarContent one:

      classNames={{
        base: "w-full border",
        calendar: "w-full bg-white shadow-lg border border-default-200/60",
        calendarContent: "w-[300px] bg-red-500/10",
        popoverContent: "w-full bg-red-500/10",
        separator: "w-6 h-6 text-center text-default-500",
        input: "w-full border-none outline-none focus:border-none focus:ring-0",
      }}

Hope this helps. I'm really unsure why the props are present in classNames and calendarProps but they are not really doing anything, hopefully this can be solved soon!

[jrgarciadev]

Why aren't you using the theme capabilities? https://nextui.org/docs/customization/customize-theme you can override the semantic colors (primary, secondary, ...etc) and the calendar will be automatically adjusted

[element-software]

Why aren't you using the theme capabilities? https://nextui.org/docs/customization/customize-theme you can override the semantic colors (primary, secondary, ...etc) and the calendar will be automatically adjusted

I am using the theme already but it has no effect on this component.

[jrgarciadev]

Please check this https://codesandbox.io/p/devbox/boring-swartz-8wpmlj?file=%2FApp.jsx%3A6%2C22&utm_medium=sandpack

[jrgarciadev]

@wingkwong #3258