feat(date-picker): add support for DatePicker to apply styles to DateInput (#3146)

* feat(date-picker): add support for DatePicker to apply styles to DateInput

* chore: update changeset

* docs(date-picker): add dateInputClassNames props

.changeset/cool-dolls-cheat.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Add support for apply styles to DateInput (#2770, #2895, #2998)

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

@@ -342,6 +342,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
 | disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
 | classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
+| dateInputClassNames     | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`                          | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots).                                                               | -                                                                    |
 
 ### DatePicker Events
 

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -172,6 +172,26 @@ describe("DatePicker", () => {
 
       expect(getByTestId("foo")).toHaveAttribute("role", "group");
     });
+
+    it("should apply custom dateInput classNames", function () {
+      const {getByRole, getByText} = render(
+        <DatePicker
+          dateInputClassNames={{
+            inputWrapper: "border-green-500",
+            label: "text-green-500",
+          }}
+          label="Date"
+        />,
+      );
+
+      const label = getByText("Date");
+
+      expect(label).toHaveClass("text-green-500");
+
+      const inputWrapper = getByRole("group");
+
+      expect(inputWrapper).toHaveClass("border-green-500");
+    });
   });
 
   describe("Events", () => {

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

@@ -49,7 +49,13 @@ interface Props<T extends DateValue>
   classNames?: SlotsToClasses<DatePickerSlots> & DateInputProps<T>["classNames"];
 }
 
-export type UseDatePickerProps<T extends DateValue> = Props<T> & AriaDatePickerProps<T>;
+export type UseDatePickerProps<T extends DateValue> = Props<T> &
+  AriaDatePickerProps<T> & {
+    /**
+     * Classname or List of classes to change the classNames of the date input element.
+     */
+    dateInputClassNames?: DateInputProps<T>["classNames"];
+  };
 
 export function useDatePicker<T extends DateValue>({
   className,
@@ -129,6 +135,7 @@ export function useDatePicker<T extends DateValue>({
   const getDateInputProps = () => {
     return {
       ...dateInputProps,
+      classNames: {...originalProps?.dateInputClassNames},
       groupProps,
       labelProps,
       createCalendar,

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

@@ -537,3 +537,18 @@ export const WithValidation = {
     label: "Date (Year 2024 or later)",
   },
 };
+
+export const WithDateInputClassNames = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    dateInputClassNames: {
+      base: "bg-gray-200 p-2 rounded-md",
+      label: "text-blue-400 font-semibold",
+      inputWrapper: "border-3 border-solid border-blue-400 p-2 rounded-md",
+      description: "text-black",
+    },
+    isRequired: true,
+    description: "Please enter your birth date",
+  },
+};