fix: allow adding date filter in river without showing the datepicker…

… and warn when date is invalid

Refs: RW-837

html/modules/custom/reliefweb_rivers/js/advanced-search.js

@@ -418,6 +418,7 @@
     parent.setAttribute('data-datepicker', '');
     parent.classList.add(advancedSearch.widgetClassPrefix + 'datepicker');
     input.classList.add(advancedSearch.widgetClassPrefix + 'datepicker-input');
+    input.setAttribute('pattern', '^\\d{4}([\\/-]\\d{2}){0,2}$');
 
     // Create the button to show the datepicker.
     var toggleLabel = createElement('span', {
@@ -506,9 +507,22 @@
     });
 
     // Update the toggle label.
-    addEventListener(input, 'keyup', function (event) {
+    addEventListener(input, 'input', function (event) {
       var date = updateDatepicker(datepicker, input.value);
       updateToggleLabel(date);
+      if (date) {
+        input.setAttribute('data-value', date.format('YYYYMMDD'));
+      }
+      else {
+        input.removeAttribute('data-value');
+      }
+      if (!date && input.value.length > 0) {
+        input.setCustomValidity(advancedSearch.labels.dates.invalid);
+      }
+      else {
+        input.setCustomValidity('');
+      }
+      input.reportValidity();
     });
 
     // Logic to keep the focus inside the dialog when it's open.

html/modules/custom/reliefweb_rivers/src/AdvancedSearch.php

@@ -260,6 +260,7 @@ protected function computeAdvancedSearchData() {
             'before' => $this->t('before _end_'),
             'after' => $this->t('after _start_'),
             'range' => $this->t('_start_ to _end_'),
+            'invalid' => $this->t('Invalid date. It will not be added'),
           ],
           'operators' => [
             'all' => $this->t('ALL OF'),

html/themes/custom/common_design_subtheme/components/rw-advanced-search/rw-advanced-search.css

@@ -393,6 +393,10 @@
   padding: 8px;
   border: 1px solid var(--cd-reliefweb-brand-grey--light);
 }
+.rw-advanced-search__filter-selector [data-datepicker] > input:invalid {
+  border: 2px solid var(--cd-reliefweb-brand-red--dark);
+  background: ;
+}
 
 /**
  * Advanced search operator selector.