diff --git a/.changeset/gentle-pigs-admire.md b/.changeset/gentle-pigs-admire.md
new file mode 100644
index 0000000000..a974c8fda6
--- /dev/null
+++ b/.changeset/gentle-pigs-admire.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Fixed missing aria labels in date range picker (#2804)
diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts
index 5eabc703f0..ac08becc56 100644
--- a/apps/docs/content/components/date-range-picker/time-zones.ts
+++ b/apps/docs/content/components/date-range-picker/time-zones.ts
@@ -1,4 +1,4 @@
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
+const App = `import {DateRangePicker} from "@nextui-org/react";
import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
export default function App() {
@@ -9,6 +9,7 @@ export default function App() {
start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
}}
+ label="Stay duration"
labelPlacement="outside"
/>
-
+
);
}`;
const react = {
- "/App.tsx": AppTs,
+ "/App.jsx": App,
};
export default {
diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts
index 6538a5dfc2..7851b31a77 100644
--- a/packages/components/date-picker/src/use-date-range-picker.ts
+++ b/packages/components/date-picker/src/use-date-range-picker.ts
@@ -57,7 +57,6 @@ export type UseDateRangePickerProps = Props & AriaDateRa
export function useDateRangePicker({
as,
- label,
isInvalid,
description,
startContent,
@@ -96,8 +95,6 @@ export function useDateRangePicker({
const popoverTriggerRef = useRef(null);
- originalProps.minValue;
-
let {
groupProps,
labelProps,
@@ -131,12 +128,15 @@ export function useDateRangePicker({
const showTimeField = !!timeGranularity;
const labelPlacement = useMemo(() => {
- if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+ if (
+ (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
+ !originalProps.label
+ ) {
return "outside";
}
return originalProps.labelPlacement ?? "inside";
- }, [originalProps.labelPlacement, label]);
+ }, [originalProps.labelPlacement, originalProps.label]);
const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
@@ -371,7 +371,7 @@ export function useDateRangePicker({
const getDateInputGroupProps = () => {
return {
as,
- label,
+ label: originalProps.label,
description,
endContent,
errorMessage,
@@ -400,7 +400,7 @@ export function useDateRangePicker({
return {
state,
- label,
+ label: originalProps.label,
slots,
classNames,
endContent,
diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx
index a7384a4df3..89464e22a6 100644
--- a/packages/components/date-picker/stories/date-range-picker.stories.tsx
+++ b/packages/components/date-picker/stories/date-range-picker.stories.tsx
@@ -138,6 +138,7 @@ const TimeZonesTemplate = (args: DateRangePickerProps) => (
/>