Show calendar when clicked on date fields

mapswipe · Nov 28, 2022 · b27371b · b27371b
1 parent 2607470
commit b27371b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/community-dashboard/app/components/DateRangeInput/index.tsx b/community-dashboard/app/components/DateRangeInput/index.tsx
@@ -325,7 +325,13 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
                 labelContainerClassName={labelContainerClassName}
                 readOnly={readOnly}
                 input={(
-                    <>
+                    <div
+                        className={styles.inputWrapper}
+                        onClick={toggleShowCalendar}
+                        onKeyPress={toggleShowCalendar}
+                        role="button"
+                        tabIndex={0}
+                    >
                         <RawInput<string>
                             name="startDate"
                             className={_cs(
@@ -366,7 +372,7 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
                             onFocus={setShowCalendarTrue}
                             type="date"
                         />
-                    </>
+                    </div>
                 )}
             />
             {!readOnly && showCalendar && (

diff --git a/community-dashboard/app/components/DateRangeInput/styles.css b/community-dashboard/app/components/DateRangeInput/styles.css
@@ -1,9 +1,16 @@
 .input-container {
     display: flex;
     flex-direction: row;
+    cursor: pointer;
+
+    .input-wrapper {
+        display: flex;
+        align-items: center;
+    }
 
     .input {
         --color: var(--color-text);
+        cursor: pointer;
         color: var(--color);
 
         &.empty {