fix(date-picker): update calendar classNames in useDateRangePicker (#3258)

* fix(date-picker): update calendar classNames in useDateRangePicker

* feat(docs): include custom styles in date-range-picker docs

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/cyan-emus-swim.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Fix calendar props on date-range-picker

apps/docs/content/components/date-range-picker/custom-styles.ts

@@ -0,0 +1,41 @@
+const App = `import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+        calendarProps={{
+          classNames: {
+            base: "bg-background",
+            headerWrapper: "pt-4 bg-background",
+            prevButton: "border-1 border-default-200 rounded-small",
+            nextButton: "border-1 border-default-200 rounded-small",
+            gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+            cellButton: [
+              "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+              // start (pseudo)
+              "data-[range-start=true]:before:rounded-l-small",
+              "data-[selection-start=true]:before:rounded-l-small",
+              // end (pseudo)
+              "data-[range-end=true]:before:rounded-r-small",
+              "data-[selection-end=true]:before:rounded-r-small",
+              // start (selected)
+              "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+              // end (selected)
+              "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+            ],
+          },
+      }}
+      className="max-w-xs"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-range-picker/index.ts

@@ -19,6 +19,7 @@ import visibleMonth from "./visible-month";
 import pageBehavior from "./page-behavior";
 import nonContigous from "./non-contiguous";
 import presets from "./presets";
+import customStyles from "./custom-styles";
 
 export const dateRangePickerContent = {
   usage,
@@ -42,4 +43,5 @@ export const dateRangePickerContent = {
   pageBehavior,
   nonContigous,
   presets,
+  customStyles,
 };

apps/docs/content/docs/components/date-range-picker.mdx

@@ -302,6 +302,12 @@ import {useLocale, useDateFormatter} from "@react-aria/i18n";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
+### Custom Styles
+
+You can customize the `DateRangePicker` component by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" files={dateRangePickerContent.customStyles} />
+
 <Spacer y={4} />
 
 ## Data Attributes

packages/components/date-picker/src/use-date-range-picker.ts

@@ -20,7 +20,7 @@ import {useDateRangePickerState} from "@react-stately/datepicker";
 import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepicker";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
-import {dateRangePicker, dateInput} from "@nextui-org/theme";
+import {dateRangePicker, dateInput, cn} from "@nextui-org/theme";
 import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
@@ -227,8 +227,11 @@ export function useDateRangePicker<T extends DateValue>({
       ...ariaCalendarProps,
       ...calendarProps,
       classNames: {
-        base: slots.calendar({class: classNames?.calendar}),
-        content: slots.calendarContent({class: classNames?.calendarContent}),
+        ...calendarProps.classNames,
+        base: slots.calendar({class: cn(calendarProps?.classNames?.base, classNames?.calendar)}),
+        content: slots.calendarContent({
+          class: cn(calendarProps?.classNames?.content, classNames?.calendarContent),
+        }),
       },
     } as RangeCalendarProps;
   };

packages/components/date-picker/stories/date-range-picker.stories.tsx

@@ -636,3 +636,38 @@ export const WithValidation = {
     label: "Date Range (Year 2024 or later)",
   },
 };
+
+export const CustomStyles = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    className: "max-w-xs",
+    calendarProps: {
+      classNames: {
+        base: "bg-background",
+        headerWrapper: "pt-4 bg-background",
+        prevButton: "border-1 border-default-200 rounded-small",
+        nextButton: "border-1 border-default-200 rounded-small",
+        gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+        cellButton: [
+          "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+          // start (pseudo)
+          "data-[range-start=true]:before:rounded-l-small",
+          "data-[selection-start=true]:before:rounded-l-small",
+
+          // end (pseudo)
+          "data-[range-end=true]:before:rounded-r-small",
+          "data-[selection-end=true]:before:rounded-r-small",
+
+          // start (selected)
+          "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+
+          // end (selected)
+          "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+        ],
+      },
+    },
+  },
+};