diff --git a/frontend/src/utils/async-form/async-form.js b/frontend/src/utils/async-form/async-form.js index b731c81da..43496e77a 100644 --- a/frontend/src/utils/async-form/async-form.js +++ b/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); diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index ae2db074c..b7d1f5210 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/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()) { diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index 7ee691ccf..477a83b39 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/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); diff --git a/frontend/src/utils/mass-input/mass-input.js b/frontend/src/utils/mass-input/mass-input.js index 09d6d5aeb..9cae6193f 100644 --- a/frontend/src/utils/mass-input/mass-input.js +++ b/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