set showDatesOutsideMonth={false} in DatePicker examples (#2265)

iTwin · Sep 26, 2024 · ff8f9d2 · ff8f9d2
1 parent 722b4dd
commit ff8f9d2
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>