fix: improve style of month datepicker

WTTJ · Dec 14, 2023 · 1a5c2d3 · 1a5c2d3
1 parent cff07b7
commit 1a5c2d3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/docs/pages/components/date-picker.mdx b/docs/pages/components/date-picker.mdx
@@ -163,6 +163,26 @@ function () {
 }
 ```
 
+## Only display months
+
+Pass `showMonthYearPicker` to only display months, without days
+
+```jsx
+function () {
+  const [value, setValue] = React.useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker showMonthYearPicker dateFormat="MM/yyyy" name="welcome" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
+```
+
 ## Properties
 
 <props propTypes={props.propTypes.DatePicker} />

diff --git a/packages/DateTimePickerCommon/src/CustomPopper.tsx b/packages/DateTimePickerCommon/src/CustomPopper.tsx
@@ -106,15 +106,22 @@ const StyledCustomPopper = styled.div(
     .react-datepicker__day--keyboard-selected,
     .react-datepicker__day--selected,
     .react-datepicker__day--in-selecting-range,
-    .react-datepicker__day--in-range,
+    .react-datepicker__day--in-range {
+      border-radius: 50%;
+      &:hover {
+        border-radius: 50%;
+      }
+    }
+
+    .react-datepicker__month-text,
     .react-datepicker__month-text--selected,
     .react-datepicker__month-text--keyboard-selected,
     .react-datepicker__month-text--in-selecting-range,
     .react-datepicker__month-text--in-range,
     .react-datepicker__month-text:hover {
-      border-radius: 50%;
+      border-radius: 2rem;
       &:hover {
-        border-radius: 50%;
+        border-radius: 2rem;
       }
     }