diff --git a/apps/website/src/content/docs/datepicker.mdx b/apps/website/src/content/docs/datepicker.mdx
index 534112f2e61..31e0a43fc8d 100644
--- a/apps/website/src/content/docs/datepicker.mdx
+++ b/apps/website/src/content/docs/datepicker.mdx
@@ -26,6 +26,8 @@ This component is recommended to be used inside the [`Popover`](popover) compone
 
 If you would rather see an example of the date picker being used on its own, look at the [standalone usage](#standalone-usage).
 
+**Note**: The `showDatesOutsideMonth` prop is recommended to be set to `false`, so that dates that are not in the currently selected month are not displayed. Currently, this prop defaults to `true` for backwards compatibility reasons.
+
 ### Localized
 
 You are able to create a localized version of the date picker that uses local names for week days and months.
diff --git a/examples/DatePicker.basic.jsx b/examples/DatePicker.basic.jsx
index 46982d9d1f1..00df9fa2fd6 100644
--- a/examples/DatePicker.basic.jsx
+++ b/examples/DatePicker.basic.jsx
@@ -20,18 +20,14 @@ export default () => {
               setVisible(false);
             }}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>
diff --git a/examples/DatePicker.daterange.jsx b/examples/DatePicker.daterange.jsx
index 2da0d9ac3b6..ef85f0c9620 100644
--- a/examples/DatePicker.daterange.jsx
+++ b/examples/DatePicker.daterange.jsx
@@ -23,18 +23,14 @@ export default () => {
             setVisible(false);
           }}
           setFocus
+          showDatesOutsideMonth={false}
         />
       }
       placement='bottom-start'
       visible={visible}
       onVisibleChange={setVisible}
     >
-      <IconButton
-        label='Choose date'
-        onClick={() => {
-          setVisible(!visible);
-        }}
-      >
+      <IconButton label='Choose date'>
         <SvgCalendar />
       </IconButton>
     </Popover>
diff --git a/examples/DatePicker.datesdisabled.jsx b/examples/DatePicker.datesdisabled.jsx
index c47ea2d87ca..387252bc6ba 100644
--- a/examples/DatePicker.datesdisabled.jsx
+++ b/examples/DatePicker.datesdisabled.jsx
@@ -34,18 +34,14 @@ export default () => {
             setVisible(false);
           }}
           setFocus
+          showDatesOutsideMonth={false}
         />
       }
       placement='bottom-start'
       visible={visible}
       onVisibleChange={setVisible}
     >
-      <IconButton
-        label='Choose date'
-        onClick={() => {
-          setVisible(!visible);
-        }}
-      >
+      <IconButton label='Choose date'>
         <SvgCalendar />
       </IconButton>
     </Popover>
diff --git a/examples/DatePicker.localized.jsx b/examples/DatePicker.localized.jsx
index 3542338bc94..b001c94fd4d 100644
--- a/examples/DatePicker.localized.jsx
+++ b/examples/DatePicker.localized.jsx
@@ -27,18 +27,14 @@ export default () => {
               setVisible(false);
             }}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>
diff --git a/examples/DatePicker.main.jsx b/examples/DatePicker.main.jsx
index a54871a3a66..2f66d680232 100644
--- a/examples/DatePicker.main.jsx
+++ b/examples/DatePicker.main.jsx
@@ -21,18 +21,14 @@ export default () => {
               setVisible(false);
             }}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>
diff --git a/examples/DatePicker.menu.jsx b/examples/DatePicker.menu.jsx
index eb8c9473b2c..f4077c7568a 100644
--- a/examples/DatePicker.menu.jsx
+++ b/examples/DatePicker.menu.jsx
@@ -17,6 +17,7 @@ export default () => {
           setCurrentDate(date);
         }}
         applyBackground={false}
+        showDatesOutsideMonth={false}
       />
       <div className='demo-label'>{currentDate.toDateString()}</div>
     </Wrapper>
diff --git a/examples/DatePicker.withcombinedtime.jsx b/examples/DatePicker.withcombinedtime.jsx
index 3b64c65fca1..86304de7eff 100644
--- a/examples/DatePicker.withcombinedtime.jsx
+++ b/examples/DatePicker.withcombinedtime.jsx
@@ -26,18 +26,14 @@ export default () => {
             minuteStep={30}
             use12Hours={true}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>
diff --git a/examples/DatePicker.withtime.jsx b/examples/DatePicker.withtime.jsx
index e9b81722b7d..353da9f5b24 100644
--- a/examples/DatePicker.withtime.jsx
+++ b/examples/DatePicker.withtime.jsx
@@ -21,18 +21,14 @@ export default () => {
             }}
             showTime={true}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>
diff --git a/examples/DatePicker.withyear.jsx b/examples/DatePicker.withyear.jsx
index 093155a22d7..ee7aa62fbb5 100644
--- a/examples/DatePicker.withyear.jsx
+++ b/examples/DatePicker.withyear.jsx
@@ -22,18 +22,14 @@ export default () => {
               setVisible(false);
             }}
             setFocus
+            showDatesOutsideMonth={false}
           />
         }
         placement='bottom-start'
         visible={visible}
         onVisibleChange={setVisible}
       >
-        <IconButton
-          label='Choose date'
-          onClick={() => {
-            setVisible(!visible);
-          }}
-        >
+        <IconButton label='Choose date'>
           <SvgCalendar />
         </IconButton>
       </Popover>