feat(datepicker): format any dates before submission

format any date input values before submission on submit for forms, mass-inputs, async-forms and async-tables

frontend/src/utils/async-form/async-form.js

@@ -1,4 +1,5 @@
 import { Utility } from '../../core/utility';
+import { Datepicker } from '../form/datepicker';
 import './async-form.scss';
 
 const ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
@@ -70,6 +71,10 @@ export class AsyncForm {
 
     const url = this._element.getAttribute('action');
     const headers = { };
+
+    // format any date values before submission
+    Datepicker.formatAllFormInputDateValues(this._element);
+    
     const body = new FormData(this._element);
 
     const isModal = this._element.closest(MODAL_SELECTOR);

frontend/src/utils/async-table/async-table.js

@@ -1,4 +1,5 @@
 import { Utility } from '../../core/utility';
+import { Datepicker } from '../form/datepicker';
 import { HttpClient } from '../../services/http-client/http-client';
 import * as debounce from 'lodash.debounce';
 import './async-table-filter.scss';
@@ -238,6 +239,10 @@ export class AsyncTable {
 
   _serializeTableFilterToURL(tableFilterForm) {
     const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+
+    // format any date values before submission
+    Datepicker.formatAllFormInputDateValues(tableFilterForm);
+
     const formData = new FormData(tableFilterForm);
 
     for (var k of url.searchParams.keys()) {
@@ -298,6 +303,10 @@ export class AsyncTable {
 
   _changePagesizeHandler = () => {
     const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+
+    // format any date values before submission
+    Datepicker.formatAllFormInputDateValues(this._pagesizeForm);
+    
     const formData = new FormData(this._pagesizeForm);
 
     for (var k of url.searchParams.keys()) {

frontend/src/utils/form/datepicker.js

@@ -115,13 +115,20 @@ export class Datepicker {
 
   /**
    * Calls formatElementValue on all datepicker objects registered for a form.
-   * @param {*} formID ID of the form for which all datepicker date values should be formatted
+   * @param {*} form form for which all datepicker date values should be formatted
    */
-  static formatAllFormElementValues(formID) {
+  static formatAllFormInputDateValues(form) {
     if (!Datepicker.datepickerCollections) {
       // no datepicker collections yet (i.e. constructor was never called) => do nothing
       return;
     }
+    
+    // if the form has no id, assign one randomly
+    if (!form.id) {
+      form.id = `f${Math.floor(Math.random() * 100000)}`;
+    }
+
+    const formID = form.id;
 
     if (Datepicker.datepickerCollections.has(formID)) {
       const datepickerInstances = Datepicker.datepickerCollections.get(formID);

frontend/src/utils/mass-input/mass-input.js

@@ -96,9 +96,6 @@ export class MassInput {
         return false;
       }
 
-      // format any date values before submission
-      Datepicker.formatAllFormElementValues(this._massInputForm.id);
-
       event.preventDefault();
       const requestBody = this._serializeForm(submitButton, enctype);
 
@@ -161,6 +158,9 @@ export class MassInput {
   }
 
   _serializeForm(submitButton, enctype) {
+    // format any date values before submission
+    Datepicker.formatAllFormInputDateValues(this._massInputForm);
+    
     const formData = new FormData(this._massInputForm);
 
     // manually add name and value of submit button to formData