diff --git a/.changeset/plenty-readers-hang.md b/.changeset/plenty-readers-hang.md
new file mode 100644
index 0000000000..b9ddbe8b2e
--- /dev/null
+++ b/.changeset/plenty-readers-hang.md
@@ -0,0 +1,5 @@
+---
+"@heroui/date-picker": patch
+---
+
+Fixed DatePicker not opening when clicking the border area (#5373)
diff --git a/packages/components/date-picker/src/use-date-picker.ts b/packages/components/date-picker/src/use-date-picker.ts
index d3705d32bd..e83d237462 100644
--- a/packages/components/date-picker/src/use-date-picker.ts
+++ b/packages/components/date-picker/src/use-date-picker.ts
@@ -134,10 +134,20 @@ export function useDatePicker<T extends DateValue>({
   const showTimeField = !!timeGranularity;
 
   const getDateInputProps = () => {
+    const handleWrapperInteraction = (e: React.PointerEvent) => {
+      if (e.target === e.currentTarget) {
+        e.preventDefault();
+        state.open();
+      }
+    };
+
     return {
       ...dateInputProps,
       classNames,
-      groupProps,
+      groupProps: {
+        ...groupProps,
+        onPointerDown: handleWrapperInteraction,
+      },
       labelProps,
       createCalendar,
       errorMessageProps,