enhance(ux): add month/year select for the shui datepicker

resources/css/shui.css

@@ -329,6 +329,37 @@ div[data-radix-popper-content-wrapper] {
   }
 }
 
+.ui__calendar {
+  .rdp-caption_dropdowns {
+    @apply flex items-center justify-center w-[70%];
+
+    .rdp-vhidden {
+      @apply hidden;
+    }
+
+    .rdp-dropdown_month,
+    .rdp-dropdown_year {
+      @apply relative pr-3 mr-3;
+
+      select {
+        @apply absolute px-2 py-0 border left-0 z-[2] opacity-0;
+      }
+
+      > .text-sm {
+        @apply w-full z-[1];
+
+        svg {
+          @apply absolute right-0 top-[6px];
+        }
+      }
+    }
+
+    .rdp-dropdown_month {
+      @apply ml-4;
+    }
+  }
+}
+
 .popper-arrow {
   fill: white;
   filter: drop-shadow(0 0 3px var(--lx-gray-12));

src/main/frontend/components/property/value.cljs

@@ -181,18 +181,21 @@
                  (ui/hide-popups-until-preview-popup!)
                  (shui/dialog-close!))))))]
     (shui/calendar
-     (cond->
-      {:mode "single"
-       :initial-focus true
-       :selected initial-day
-       :id @*ident
-       :class-names {:months ""}
-       :on-day-key-down (fn [^js d _ ^js e]
-                          (when (= "Enter" (.-key e))
-                            (select-handler! d)))
-       :on-select select-handler!}
-       initial-month
-       (assoc :default-month initial-month)))))
+      (cond->
+        {:mode "single"
+         :initial-focus true
+         :caption-layout "dropdown-buttons"
+         :fromYear 1900
+         :toYear 2099
+         :selected initial-day
+         :id @*ident
+         :class-names {:months ""}
+         :on-day-key-down (fn [^js d _ ^js e]
+                            (when (= "Enter" (.-key e))
+                              (select-handler! d)))
+         :on-select select-handler!}
+        initial-month
+        (assoc :default-month initial-month)))))
 
 (rum/defc date-picker
   [value {:keys [on-change editing? multiple-values? other-position?]}]