chore: improves datepicker styles and functionality (#2347)

Co-authored-by: Jarrod Flesch <[email protected]>

Author: AlessioGr

src/admin/components/elements/DatePicker/DatePicker.tsx

@@ -17,7 +17,7 @@ const DateTime: React.FC<Props> = (props) => {
     value,
     onChange,
     displayFormat,
-    pickerAppearance,
+    pickerAppearance = "dayOnly",
     minDate,
     maxDate,
     monthsToShow = 1,
@@ -98,6 +98,9 @@ const DateTime: React.FC<Props> = (props) => {
               enabled: true,
             },
           ]}
+          showMonthDropdown
+          showYearDropdown
+          dropdownMode="select"
         />
       </div>
     </div>

src/admin/components/elements/DatePicker/index.scss

@@ -99,9 +99,9 @@ $cal-icon-width: 18px;
 
   .react-datepicker {
     @include shadow-lg;
+    border: 1px solid var(--theme-elevation-100);
     background: var(--theme-input-bg);
     display: inline-flex;
-    border: none;
     font-family: var(--font-body);
     font-weight: 100;
     border-radius: 0;
@@ -169,8 +169,12 @@ $cal-icon-width: 18px;
     }
 
     &__current-month {
+      display: none;
+    }
+
+    &__header__dropdown, &-year-header {
       padding: 10px 0;
-      font-weight: 600;
+      font-weight: bold;
     }
 
     &__month-container {
@@ -185,6 +189,20 @@ $cal-icon-width: 18px;
       border-left: none;
     }
 
+    &__month-text {
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
+    }
+
+    &__month-select,
+    &__year-select {
+      min-width: 70px;
+      border: none;
+      background: none;
+      outline: none;
+      cursor: pointer;
+    }
 
     &__day-names {
       background-color: var(--theme-elevation-100);
@@ -239,6 +257,10 @@ $cal-icon-width: 18px;
     border: none;
   }
 
+  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
+    max-height: 100%;
+  }
+
   .react-datepicker__day--keyboard-selected,
   .react-datepicker__month-text--keyboard-selected,
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
@@ -281,7 +303,40 @@ $cal-icon-width: 18px;
     font-size: base(.5);
   }
 
+  &__appearance--dayOnly,
+  &__appearance--monthOnly {
+    .react-datepicker {
+      &__month-container {
+        border-right: none;
+      }
+    }
+  }
+
   @include small-break {
+    .react-datepicker {
+      flex-direction: column;
+    }
+    .react-datepicker__month-container {
+      border-right: 0;
+    }
+    .react-datepicker__time-container {
+      width: auto;
+    }
+    .react-datepicker__header--time {
+      background-color: var(--theme-elevation-100);
+      padding: 8px 0;
+      border-bottom: none;
+    }
+    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+      height: 120px;
+      width: unset;
+      > ul {
+        height: 120px;
+      }
+    }
+    .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+      right: 0px;
+    }
     &__input-wrapper {
       .icon {
         top: calc(50% - #{base(.25)});

test/fields/collections/Date/index.ts

@@ -16,6 +16,15 @@ const DateFields: CollectionConfig = {
     {
       name: 'timeOnly',
       type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'timeOnly',
+        },
+      },
+    },
+    {
+      name: 'timeOnlyWithCustomFormat',
+      type: 'date',
       admin: {
         date: {
           pickerAppearance: 'timeOnly',
@@ -56,6 +65,7 @@ const DateFields: CollectionConfig = {
 export const dateDoc = {
   default: '2022-08-12T10:00:00.000+00:00',
   timeOnly: '2022-08-12T10:00:00.157+00:00',
+  timeOnlyWithCustomFormat: '2022-08-12T10:00:00.157+00:00',
   dayOnly: '2022-08-11T22:00:00.000+00:00',
   dayAndTime: '2022-08-12T10:00:00.052+00:00',
   monthOnly: '2022-07-31T22:00:00.000+00:00',