IBX-4791: [Date picker] Cannot open date time picker by clicking on c…

…alendar icon in the input
ibexa · Jan 17, 2023 · ce77dae · ce77dae
1 parent fd62aae
commit ce77dae
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/date.time.picker.js b/src/bundle/Resources/public/js/scripts/core/date.time.picker.js
@@ -11,6 +11,7 @@
             this.container = config.container;
             this.fieldWrapper = this.container.querySelector('.ibexa-date-time-picker');
             this.inputField = this.fieldWrapper.querySelector('.ibexa-date-time-picker__input');
+            this.calendarIcon = this.fieldWrapper.querySelector('.ibexa-input-text-wrapper__action-btn--calendar-icon');
             this.clearBtn = this.fieldWrapper.querySelector('.ibexa-input-text-wrapper__action-btn--clear');
             this.customOnChange = config.onChange;
 
@@ -97,6 +98,13 @@
             this.inputField.addEventListener('input', this.onInput, false);
             this.flatpickrInstance.minuteElement.addEventListener('keyup', this.onKeyUp.bind(this, true), false);
             this.flatpickrInstance.hourElement.addEventListener('keyup', this.onKeyUp.bind(this, false), false);
+            this.calendarIcon.addEventListener(
+                'click',
+                () => {
+                    this.flatpickrInstance.toggle();
+                },
+                false,
+            );
         }
     }
 

diff --git a/src/bundle/Resources/public/scss/_date-time-picker.scss b/src/bundle/Resources/public/scss/_date-time-picker.scss
@@ -19,8 +19,20 @@
         width: 100%;
     }
 
-    .ibexa-input-text-wrapper__actions {
-        top: calculateRem(24px);
+    .ibexa-input-text-wrapper {
+        &__actions {
+            top: calculateRem(24px);
+        }
+
+        &__action-btn--calendar-icon {
+            &:hover {
+                cursor: pointer;
+
+                .ibexa-icon {
+                    fill: $ibexa-color-primary;
+                }
+            }
+        }
     }
 
     &--small {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig
@@ -27,7 +27,7 @@
     {% endblock %}
     {% block actions %}
         {{ parent() }}
-        <div class="ibexa-input-text-wrapper__action-btn">
+        <div class="ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--calendar-icon">
             <svg class="ibexa-icon ibexa-icon--small">
                 <use xlink:href="{{ ibexa_icon_path('date') }}"></use>
             </svg>