Repository: gpbl/react-day-picker
Pull request #2179 (2024-06-02 11:32:38)

feat: add new DayDate component


Patch:
diff --git a/examples/CustomDay.tsx b/examples/CustomDay.tsx
deleted file mode 100644
index ab781578d..000000000
--- a/examples/CustomDay.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import { type DayProps, DayPicker } from "react-day-picker";
-
-function HighlightedDay(props: DayProps) {
-  return (
-    <div {...props.htmlAttributes}>
-      {props.day.date.getDate() === 19 && ` 🎉`}
-      {props.children}
-    </div>
-  );
-}
-
-export function CustomDay() {
-  return <DayPicker mode="single" components={{ Day: HighlightedDay }} />;
-}
diff --git a/examples/CustomDayDate.tsx b/examples/CustomDayDate.tsx
new file mode 100644
index 000000000..82f9f55ff
--- /dev/null
+++ b/examples/CustomDayDate.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { type DayProps, DayPicker, DayDateProps } from "react-day-picker";
+
+function HighlightedDay(props: DayDateProps) {
+  return (
+    <span {...props.rootProps}>
+      {props.day.date.getDate() === 19 && ` 🎉`}
+      {props.formattedDate}
+    </span>
+  );
+}
+
+export function CustomDayDate() {
+  return <DayPicker mode="single" components={{ DayDate: HighlightedDay }} />;
+}
diff --git a/examples/Footer.tsx b/examples/Footer.tsx
new file mode 100644
index 000000000..ae9270d03
--- /dev/null
+++ b/examples/Footer.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function Footer() {
+  const [selected, setSelected] = React.useState<Date>();
+  return (
+    <DayPicker
+      mode="single"
+      selected={selected}
+      onSelect={setSelected}
+      footer={
+        selected ? (
+          <p>You picked {selected.toLocaleDateString()}.</p>
+        ) : (
+          <p>Please pick a date.</p>
+        )
+      }
+    />
+  );
+}
diff --git a/examples/OutsideDays.tsx b/examples/OutsideDays.tsx
index 980139c1a..abc7021c6 100644
--- a/examples/OutsideDays.tsx
+++ b/examples/OutsideDays.tsx
@@ -3,5 +3,5 @@ import React from "react";
 import { DayPicker } from "react-day-picker";
 
 export function OutsideDays() {
-  return <DayPicker showWeekNumber showOutsideDays />;
+  return <DayPicker showOutsideDays />;
 }
diff --git a/examples/RangeShiftKey.tsx b/examples/RangeShiftKey.tsx
index bc3183c2f..bc4cec326 100644
--- a/examples/RangeShiftKey.tsx
+++ b/examples/RangeShiftKey.tsx
@@ -10,9 +10,9 @@ import {
 
 function DayWithShiftKey(props: DayProps) {
   const { selected } = useSelection<"range">();
-  const onClick = props.htmlAttributes?.onClick;
+  const onClick = props.rootProps?.onClick;
 
-  const handleClick: MouseEventHandler<HTMLElement> = (e) => {
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
     if (
       selected?.from &&
       !selected.to &&
@@ -24,7 +24,7 @@ function DayWithShiftKey(props: DayProps) {
     onClick?.(e);
   };
   return (
-    <div {...props.htmlAttributes} onClick={handleClick}>
+    <div {...props.rootProps} onClick={handleClick}>
       {props.children}
     </div>
   );
diff --git a/examples/index.ts b/examples/index.ts
index aaf84fde2..dbed4aad5 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -3,7 +3,7 @@ export * from "./Controlled";
 export * from "./CssModules";
 export * from "./CssVariables";
 export * from "./CustomCaption";
-export * from "./CustomDay";
+export * from "./CustomDayDate";
 export * from "./CustomMultiple";
 export * from "./CustomSingle";
 export * from "./CustomWeek";
@@ -15,6 +15,7 @@ export * from "./Dropdown";
 export * from "./DropdownMultipleMonths";
 export * from "./Fixedweeks";
 export * from "./FocusRecursive";
+export * from "./Footer";
 export * from "./Formatters";
 export * from "./FromToMonth";
 export * from "./FromToYear";
diff --git a/src/UI.ts b/src/UI.ts
index 958ddcb3e..4c76f2d3d 100644
--- a/src/UI.ts
+++ b/src/UI.ts
@@ -17,8 +17,10 @@ export enum UI {
   Calendar = "calendar",
   /** The Chevron SVG element used by navigation buttons and dropdowns. */
   Chevron = "chevron",
-  /** The gridcell with the day's date. Extended by {@link DayModifier}. */
+  /** The grid cell with the day's date. Extended by {@link DayModifier}. */
   Day = "day",
+  /** The element containing the formatted day's date, inside the grid cell. */
+  DayDate = "day_date",
   /** The caption label of the month (when not showing the dropdown navigation). */
   CaptionLabel = "caption_label",
   /** The container of the dropdown navigation (when enabled). */
diff --git a/src/components/Day.tsx b/src/components/Day.tsx
index 217dd731f..17a912bd7 100644
--- a/src/components/Day.tsx
+++ b/src/components/Day.tsx
@@ -5,25 +5,48 @@ import type { CalendarDay } from "../classes";
 import type { DayModifiers } from "../types";
 
 /**
- * Render the gridcell of a day in the calendar.
+ * Render the gridcell of a day in the calendar and handle the interaction and
+ * the focus with they day.
  *
- * Use the `components` prop to swap this component with a custom one.
+ * Use the `components` prop to swap this component with a custom one. If you
+ * need to just change the content of the day cell, consider swapping the
+ * `DayDate` component instead.
  *
  * @group Components
  * @see https://react-day-picker.js.org/advanced-guides/custom-components
  */
 export function Day(props: {
-  /** The day to be rendered in the gridcell. */
   day: CalendarDay;
-  /** Modifiers for the day. */
   modifiers: DayModifiers;
-  /** HTML attributes for the gridcell. */
-  htmlAttributes: HTMLAttributes<HTMLElement>;
-  /** Children of the gridcell. */
   children?: ReactNode;
+  rootProps: Pick<
+    JSX.IntrinsicElements["div"],
+    | "className"
+    | "style"
+    | "tabIndex"
+    | "aria-colindex"
+    | "aria-disabled"
+    | "aria-hidden"
+    | "aria-selected"
+    | "onClick"
+    | "onBlur"
+    | "onFocus"
+    | "onKeyDown"
+    | "onKeyPress"
+    | "onKeyUp"
+    | "onMouseEnter"
+    | "onMouseLeave"
+    | "onPointerEnter"
+    | "onPointerLeave"
+    | "onTouchCancel"
+    | "onTouchEnd"
+    | "onTouchMove"
+    | "onTouchStart"
+    | "ref"
+    | "role"
+  >;
 }) {
-  const { children, htmlAttributes } = props;
-  return <div {...htmlAttributes}>{children}</div>;
+  return <div {...props.rootProps}>{props.children}</div>;
 }
 
 export type DayProps = Parameters<typeof Day>[0];
diff --git a/src/components/DayDate.tsx b/src/components/DayDate.tsx
new file mode 100644
index 000000000..2759d645f
--- /dev/null
+++ b/src/components/DayDate.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import type { CalendarDay } from "../classes";
+import type { DayModifiers } from "../types";
+
+/**
+ * Render the date as string inside the day grid cell.
+ *
+ * Use the `components` prop to swap this component with a custom one.
+ *
+ * @group Components
+ * @see https://react-day-picker.js.org/advanced-guides/custom-components
+ */
+export function DayDate(props: {
+  day: CalendarDay;
+  /** The date to display. */
+  formattedDate: string;
+  /** The modifiers for the day. */
+  modifiers: DayModifiers;
+  /** The HTML attributes for the root element. */
+  rootProps: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
+}) {
+  return <span {...props.rootProps}>{props.formattedDate}</span>;
+}
+
+export type DayDateProps = Parameters<typeof DayDate>[0];
diff --git a/src/components/DayWrapper.tsx b/src/components/DayWrapper.tsx
index 252587576..9ec2c52a5 100644
--- a/src/components/DayWrapper.tsx
+++ b/src/components/DayWrapper.tsx
@@ -20,7 +20,8 @@ import { debounce } from "../helpers/debounce";
 import { getClassNamesForModifiers } from "../helpers/getClassNamesForModifiers";
 import { getStyleForModifiers } from "../helpers/getStyleForModifiers";
 
-import { Day as DefaultDay } from "./Day";
+import { DayProps, Day as DefaultDay } from "./Day";
+import { DayDateProps, DayDate as DefaultDayDate } from "./DayDate";
 
 /**
  * Provides a `Day` the day state and the html attributes. Developers may use a
@@ -41,7 +42,6 @@ export function DayWrapper(props: {
     dir,
     formatters: { formatDay },
     locale,
-    mode,
     modifiersClassNames = {},
     modifiersStyles = {},
     onDayFocus,
@@ -213,7 +213,7 @@ export function DayWrapper(props: {
     className.push(classNames[DayModifier.focused]);
   }
 
-  const htmlAttributes: JSX.IntrinsicElements["div"] = {
+  const dayRootProps: DayProps["rootProps"] = {
     role: "gridcell",
     className: className.join(" "),
     style,
@@ -250,9 +250,21 @@ export function DayWrapper(props: {
 
   const Day = components?.Day ?? DefaultDay;
 
+  const dayDateRootProps: DayDateProps["rootProps"] = {
+    className: classNames[UI.DayDate],
+    style: styles[UI.DayDate]
+  };
+
+  const DayDate = components?.DayDate ?? DefaultDayDate;
+
   return (
-    <Day day={props.day} modifiers={modifiers} htmlAttributes={htmlAttributes}>
-      {formatDay(props.day.date, { locale })}
+    <Day day={props.day} modifiers={modifiers} rootProps={dayRootProps}>
+      <DayDate
+        day={props.day}
+        modifiers={modifiers}
+        formattedDate={formatDay(props.day.date, { locale })}
+        rootProps={dayDateRootProps}
+      />
     </Day>
   );
 }
diff --git a/src/components/custom-components.ts b/src/components/custom-components.ts
index 991ed37e6..8d47247e0 100644
--- a/src/components/custom-components.ts
+++ b/src/components/custom-components.ts
@@ -1,6 +1,7 @@
 export * from "./Button";
 export * from "./Chevron";
 export * from "./Day";
+export * from "./DayDate";
 export * from "./Dropdown";
 export * from "./DropdownNav";
 export * from "./Footer";
diff --git a/src/style.css b/src/style.css
index e1bfc9483..1125d83c6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -86,12 +86,29 @@
   /* The font of the month caption. */
   --rdp-month-caption-font: bold larger var(--rdp-font-family);
 
-  /* The color of the range background. */
-  --rdp-range-background-color: var(--rdp-accent-color);
+  /* The color of the background for days in the middle of a range. */
+  --rdp-range-middle-background-color: #ababff;
+
+  /* The font for days in the middle of a range. */
+  --rdp-range-middle-font: normal medium var(--rdp-font-family);
 
   /* The color of the range text. */
   --rdp-range-color: white;
 
+  /* Used for the background of the start of the selected range. */
+  --rdp-range-start-background: linear-gradient(
+    90deg,
+    transparent 50%,
+    var(--rdp-range-middle-background-color) 50%
+  );
+
+  /* Used for the background of the end of the selected range. */
+  --rdp-range-end-background: linear-gradient(
+    90deg,
+    var(--rdp-range-middle-background-color) 50%,
+    transparent 50%
+  );
+
   /* The gap between the dropdown. */
   --rdp-dropdown-gap: 0.5rem;
 
@@ -144,9 +161,20 @@
 
   width: var(--rdp-day-width);
   height: var(--rdp-day-height);
+
+  font: var(--rdp-day-font);
+}
+
+.rdp-day_date {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+
   border: var(--rdp-day-border);
   border-radius: var(--rdp-day-border-radius);
-  font: var(--rdp-day-font);
 }
 
 .rdp-caption_label {
@@ -302,9 +330,11 @@
   color: var(--rdp-today-color);
 }
 
-.rdp-selected,
-.rdp-selected.rdp-outside {
+.rdp-selected {
   font: var(--rdp-selected-font);
+}
+
+.rdp-selected .rdp-day_date {
   border: var(--rdp-selected-border);
 }
 
diff --git a/website/docs/advanced-guides/custom-components.mdx b/website/docs/advanced-guides/custom-components.mdx
index 498e229cf..5d4242865 100644
--- a/website/docs/advanced-guides/custom-components.mdx
+++ b/website/docs/advanced-guides/custom-components.mdx
@@ -17,25 +17,25 @@ Use the `components` prop to swap the components used to render DayPicker. A lis
 
 For example, if you need to customize the component creating the day cell, you can replace the `Day` component with a custom implementation.
 
-```tsx title="./CustomDay.tsx"
+```tsx title="./CustomDayDate.tsx"
 import { DayPicker, type DayProps } from "react-day-picker";
 
-function CustomDay(props: DayProps) {
+function CustomDayDate(props: DayDateProps) {
   return (
-    <div {...props.htmlAttributes}>
+    <span {...props.rootProps}>
       {props.day.date.getDate() === 19 && ` 🎉`}
-      {props.children}
-    </div>
+      {props.formattedDate}
+    </span>
   );
 }
 
 export function MyDatePicker() {
-  return <DayPicker mode="single" components={{ Day: CustomDay }} />;
+  return <DayPicker mode="single" components={{ DayDate: CustomDayDate }} />;
 }
 ```
 
 <BrowserWindow>
-  <Examples.CustomDay />
+  <Examples.CustomDayDate />
 </BrowserWindow>
 
 ## DayPicker Hooks
diff --git a/website/docs/using-daypicker/customization.mdx b/website/docs/using-daypicker/customization.mdx
index 7edd5e4ca..8e392e74b 100644
--- a/website/docs/using-daypicker/customization.mdx
+++ b/website/docs/using-daypicker/customization.mdx
@@ -127,6 +127,18 @@ Use the [formatters](./localization.mdx#formatters) and [labels](./localization.
 | `formatters` | [`Formatters`](../api/type-aliases/Formatters.md) | Format of the dates displayed in the calendar. |
 | `labels`     | [`Labels`](../api/type-aliases/Labels.md)         | Set the ARIA labels used in the calendar.      |
 
+## Footer
+
+Use the `footer` prop to display a footer below the calendar.
+
+```tsx
+<DayPicker mode="single" footer={<p>Please pick a date.</p>} />
+```
+
+<BrowserWindow>
+  <Examples.Footer />
+</BrowserWindow>
+
 ## Custom Components
 
 In DayPicker, you can replace the components used internally to render the calendar. See the [Custom Components](../advanced-guides/custom-components.mdx) guide for more information.


Test patch:
diff --git a/examples/CustomDayContent.test.tsx b/examples/CustomDayDate.test.tsx
similarity index 77%
rename from examples/CustomDayContent.test.tsx
rename to examples/CustomDayDate.test.tsx
index f729cf04e..e0333cb2f 100644
--- a/examples/CustomDayContent.test.tsx
+++ b/examples/CustomDayDate.test.tsx
@@ -2,12 +2,12 @@ import React from "react";
 
 import { render, screen } from "@/test/render";
 
-import { CustomDay } from "./CustomDay";
+import { CustomDayDate } from "./CustomDayDate";
 
 jest.useFakeTimers().setSystemTime(new Date(2021, 10, 25));
 
 beforeEach(() => {
-  render(<CustomDay />);
+  render(<CustomDayDate />);
 });
 
 test("should render the emoji", () => {
diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 34396c643..10e6fcb0c 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -108,7 +108,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -116,7 +120,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -124,7 +132,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -132,7 +144,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -140,7 +156,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                5
+                <span
+                  class="rdp-day_date"
+                >
+                  5
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -148,7 +168,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                6
+                <span
+                  class="rdp-day_date"
+                >
+                  6
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -156,7 +180,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                7
+                <span
+                  class="rdp-day_date"
+                >
+                  7
+                </span>
               </div>
             </div>
             <div
@@ -170,7 +198,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                8
+                <span
+                  class="rdp-day_date"
+                >
+                  8
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -178,7 +210,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                9
+                <span
+                  class="rdp-day_date"
+                >
+                  9
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -186,7 +222,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                10
+                <span
+                  class="rdp-day_date"
+                >
+                  10
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -194,7 +234,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                11
+                <span
+                  class="rdp-day_date"
+                >
+                  11
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -202,7 +246,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                12
+                <span
+                  class="rdp-day_date"
+                >
+                  12
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -210,7 +258,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                13
+                <span
+                  class="rdp-day_date"
+                >
+                  13
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -218,7 +270,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                14
+                <span
+                  class="rdp-day_date"
+                >
+                  14
+                </span>
               </div>
             </div>
             <div
@@ -233,7 +289,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="0"
               >
-                15
+                <span
+                  class="rdp-day_date"
+                >
+                  15
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -242,7 +302,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                16
+                <span
+                  class="rdp-day_date"
+                >
+                  16
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -251,7 +315,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                17
+                <span
+                  class="rdp-day_date"
+                >
+                  17
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -260,7 +328,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                18
+                <span
+                  class="rdp-day_date"
+                >
+                  18
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -269,7 +341,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                19
+                <span
+                  class="rdp-day_date"
+                >
+                  19
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -277,7 +353,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                20
+                <span
+                  class="rdp-day_date"
+                >
+                  20
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -285,7 +365,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                21
+                <span
+                  class="rdp-day_date"
+                >
+                  21
+                </span>
               </div>
             </div>
             <div
@@ -299,7 +383,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                22
+                <span
+                  class="rdp-day_date"
+                >
+                  22
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -307,7 +395,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                23
+                <span
+                  class="rdp-day_date"
+                >
+                  23
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -315,7 +407,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                24
+                <span
+                  class="rdp-day_date"
+                >
+                  24
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -323,7 +419,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                25
+                <span
+                  class="rdp-day_date"
+                >
+                  25
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -331,7 +431,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                26
+                <span
+                  class="rdp-day_date"
+                >
+                  26
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -339,7 +443,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                27
+                <span
+                  class="rdp-day_date"
+                >
+                  27
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -347,7 +455,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                28
+                <span
+                  class="rdp-day_date"
+                >
+                  28
+                </span>
               </div>
             </div>
             <div
@@ -361,7 +473,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                29
+                <span
+                  class="rdp-day_date"
+                >
+                  29
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -369,7 +485,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                30
+                <span
+                  class="rdp-day_date"
+                >
+                  30
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -378,7 +498,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -387,7 +511,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -396,7 +524,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -405,7 +537,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -414,7 +550,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                5
+                <span
+                  class="rdp-day_date"
+                >
+                  5
+                </span>
               </div>
             </div>
           </div>
@@ -583,7 +723,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -591,7 +735,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -599,7 +747,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -607,7 +759,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -615,7 +771,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                5
+                <span
+                  class="rdp-day_date"
+                >
+                  5
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -623,7 +783,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                6
+                <span
+                  class="rdp-day_date"
+                >
+                  6
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -631,7 +795,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                7
+                <span
+                  class="rdp-day_date"
+                >
+                  7
+                </span>
               </div>
             </div>
             <div
@@ -645,7 +813,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                8
+                <span
+                  class="rdp-day_date"
+                >
+                  8
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -653,7 +825,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                9
+                <span
+                  class="rdp-day_date"
+                >
+                  9
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -661,7 +837,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                10
+                <span
+                  class="rdp-day_date"
+                >
+                  10
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -669,7 +849,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                11
+                <span
+                  class="rdp-day_date"
+                >
+                  11
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -677,7 +861,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                12
+                <span
+                  class="rdp-day_date"
+                >
+                  12
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -685,7 +873,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                13
+                <span
+                  class="rdp-day_date"
+                >
+                  13
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -693,7 +885,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                14
+                <span
+                  class="rdp-day_date"
+                >
+                  14
+                </span>
               </div>
             </div>
             <div
@@ -707,7 +903,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                15
+                <span
+                  class="rdp-day_date"
+                >
+                  15
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -715,7 +915,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                16
+                <span
+                  class="rdp-day_date"
+                >
+                  16
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -723,7 +927,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="0"
               >
-                17
+                <span
+                  class="rdp-day_date"
+                >
+                  17
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -731,7 +939,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                18
+                <span
+                  class="rdp-day_date"
+                >
+                  18
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -739,7 +951,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                19
+                <span
+                  class="rdp-day_date"
+                >
+                  19
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -747,7 +963,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                20
+                <span
+                  class="rdp-day_date"
+                >
+                  20
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -755,7 +975,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                21
+                <span
+                  class="rdp-day_date"
+                >
+                  21
+                </span>
               </div>
             </div>
             <div
@@ -769,7 +993,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                22
+                <span
+                  class="rdp-day_date"
+                >
+                  22
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -777,7 +1005,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                23
+                <span
+                  class="rdp-day_date"
+                >
+                  23
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -785,7 +1017,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                24
+                <span
+                  class="rdp-day_date"
+                >
+                  24
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -793,7 +1029,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                25
+                <span
+                  class="rdp-day_date"
+                >
+                  25
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -801,7 +1041,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                26
+                <span
+                  class="rdp-day_date"
+                >
+                  26
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -809,7 +1053,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                27
+                <span
+                  class="rdp-day_date"
+                >
+                  27
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -817,7 +1065,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                28
+                <span
+                  class="rdp-day_date"
+                >
+                  28
+                </span>
               </div>
             </div>
             <div
@@ -831,7 +1083,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                29
+                <span
+                  class="rdp-day_date"
+                >
+                  29
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -839,7 +1095,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                30
+                <span
+                  class="rdp-day_date"
+                >
+                  30
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -848,7 +1108,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -857,7 +1121,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -866,7 +1134,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -875,7 +1147,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -884,7 +1160,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 role="gridcell"
                 tabindex="-1"
               >
-                5
+                <span
+                  class="rdp-day_date"
+                >
+                  5
+                </span>
               </div>
             </div>
           </div>
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index 84c306d1b..bb318ce9f 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -111,7 +111,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                31
+                <span
+                  class="rdp-day_date"
+                >
+                  31
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -119,7 +123,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -127,7 +135,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -135,7 +147,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -143,7 +159,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -151,7 +171,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                5
+                <span
+                  class="rdp-day_date"
+                >
+                  5
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -159,7 +183,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                6
+                <span
+                  class="rdp-day_date"
+                >
+                  6
+                </span>
               </div>
             </div>
             <div
@@ -173,7 +201,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                7
+                <span
+                  class="rdp-day_date"
+                >
+                  7
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -181,7 +213,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                8
+                <span
+                  class="rdp-day_date"
+                >
+                  8
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -189,7 +225,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                9
+                <span
+                  class="rdp-day_date"
+                >
+                  9
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -197,7 +237,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                10
+                <span
+                  class="rdp-day_date"
+                >
+                  10
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -205,7 +249,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                11
+                <span
+                  class="rdp-day_date"
+                >
+                  11
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -213,7 +261,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                12
+                <span
+                  class="rdp-day_date"
+                >
+                  12
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -221,7 +273,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                13
+                <span
+                  class="rdp-day_date"
+                >
+                  13
+                </span>
               </div>
             </div>
             <div
@@ -235,7 +291,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                14
+                <span
+                  class="rdp-day_date"
+                >
+                  14
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -243,7 +303,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                15
+                <span
+                  class="rdp-day_date"
+                >
+                  15
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -251,7 +315,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                16
+                <span
+                  class="rdp-day_date"
+                >
+                  16
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -259,7 +327,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                17
+                <span
+                  class="rdp-day_date"
+                >
+                  17
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -267,7 +339,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                18
+                <span
+                  class="rdp-day_date"
+                >
+                  18
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -275,7 +351,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                19
+                <span
+                  class="rdp-day_date"
+                >
+                  19
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -283,7 +363,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                20
+                <span
+                  class="rdp-day_date"
+                >
+                  20
+                </span>
               </div>
             </div>
             <div
@@ -297,7 +381,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                21
+                <span
+                  class="rdp-day_date"
+                >
+                  21
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -305,7 +393,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                22
+                <span
+                  class="rdp-day_date"
+                >
+                  22
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -313,7 +405,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                23
+                <span
+                  class="rdp-day_date"
+                >
+                  23
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -321,7 +417,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                24
+                <span
+                  class="rdp-day_date"
+                >
+                  24
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -329,7 +429,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                25
+                <span
+                  class="rdp-day_date"
+                >
+                  25
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -337,7 +441,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                26
+                <span
+                  class="rdp-day_date"
+                >
+                  26
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -345,7 +453,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                27
+                <span
+                  class="rdp-day_date"
+                >
+                  27
+                </span>
               </div>
             </div>
             <div
@@ -359,7 +471,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                28
+                <span
+                  class="rdp-day_date"
+                >
+                  28
+                </span>
               </div>
               <div
                 aria-colindex="2"
@@ -367,7 +483,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                29
+                <span
+                  class="rdp-day_date"
+                >
+                  29
+                </span>
               </div>
               <div
                 aria-colindex="3"
@@ -375,7 +495,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                30
+                <span
+                  class="rdp-day_date"
+                >
+                  30
+                </span>
               </div>
               <div
                 aria-colindex="4"
@@ -384,7 +508,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                1
+                <span
+                  class="rdp-day_date"
+                >
+                  1
+                </span>
               </div>
               <div
                 aria-colindex="5"
@@ -393,7 +521,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                2
+                <span
+                  class="rdp-day_date"
+                >
+                  2
+                </span>
               </div>
               <div
                 aria-colindex="6"
@@ -402,7 +534,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                3
+                <span
+                  class="rdp-day_date"
+                >
+                  3
+                </span>
               </div>
               <div
                 aria-colindex="7"
@@ -411,7 +547,11 @@ exports[`should match the snapshot 1`] = `
                 role="gridcell"
                 tabindex="-1"
               >
-                4
+                <span
+                  class="rdp-day_date"
+                >
+                  4
+                </span>
               </div>
             </div>
           </div>
diff --git a/src/helpers/getDefaultClassNames.test.ts b/src/helpers/getDefaultClassNames.test.ts
index ddb04f09c..e33be6c8c 100644
--- a/src/helpers/getDefaultClassNames.test.ts
+++ b/src/helpers/getDefaultClassNames.test.ts
@@ -9,6 +9,7 @@ test("should return the default classnames", () => {
     chevron: "rdp-chevron",
     chevron_disabled: "rdp-chevron_disabled",
     day: "rdp-day",
+    day_date: "rdp-day_date",
     disabled: "rdp-disabled",
     dropdown_nav: "rdp-dropdown_nav",
     dropdown_root: "rdp-dropdown_root",