From 1a5c2d315dc7e94d839ea9201e7cd3254fcb9175 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ha=C3=AFoun-Viet?= <simon.haioun-viet@wttj.co>
Date: Thu, 14 Dec 2023 10:25:09 +0100
Subject: [PATCH] fix: improve style of month datepicker

---
 docs/pages/components/date-picker.mdx         | 20 +++++++++++++++++++
 .../DateTimePickerCommon/src/CustomPopper.tsx | 13 +++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/docs/pages/components/date-picker.mdx b/docs/pages/components/date-picker.mdx
index 49149c8296..95df42200c 100644
--- 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
index 7a148846bd..fdc8ba9eea 100644
--- 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;
       }
     }