@formio/js 5.1.0-dev.6040.debc859 → 5.1.0-dev.6042.603237d

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 '';
-import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
 import { process as processAsync, processSync } from '@formio/core/process';
 /**
  * NestedComponent class.
@@ -81,18 +81,15 @@ export default class NestedComponent extends Field {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
-        const isConditionallyHidden = this.checkConditionallyHidden();
         const forceShow = this.shouldForceShow();
         const forceHide = this.shouldForceHide();
         this.components.forEach((component) => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
             component.parentVisible = isVisible;
-            component._parentConditionallyHidden = isConditionallyHidden;
             let visible;
             if (component.hasCondition()) {
-                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
-                visible = !component.conditionallyHidden;
+                visible = !component.conditionallyHidden();
             }
             else {
                 visible = !component.component.hidden;
@@ -207,7 +204,7 @@ export default class NestedComponent extends Field {
      */
     set rowIndex(value) {
         this._rowIndex = value;
-        this.paths = getComponentPaths(this.component, this.parent?.component, {
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
             ...(this.parent?.paths || {}),
             ...{ dataIndex: value }
         });
@@ -311,7 +308,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path) {
-        path = getStringFromComponentPath(path);
+        path = FormioUtils.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
             fullPath: undefined,
@@ -323,7 +320,7 @@ export default class NestedComponent extends Field {
         };
         this.everyComponent((component) => {
             // All searches are relative to this component so replace this path from the child paths.
-            componentMatches(component.component, {
+            FormioUtils.componentMatches(component.component, {
                 path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
                 fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
                 localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
@@ -335,7 +332,7 @@ export default class NestedComponent extends Field {
                 return match;
             });
         });
-        return getBestMatch(matches)?.instance;
+        return FormioUtils.getBestMatch(matches)?.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -373,12 +370,11 @@ export default class NestedComponent extends Field {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
-        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = options?.root || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;
         if (!(options.display === 'pdf' && this.builderMode)) {
-            component.id = getRandomComponentId();
+            component.id = FormioUtils.getRandomComponentId();
         }
         const comp = Components.create(component, options, data, true);
         comp.init();
@@ -631,19 +627,8 @@ export default class NestedComponent extends Field {
     }
     clearOnHide(show) {
         super.clearOnHide(show);
-        if (this.component.clearOnHide) {
-            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {
-                this.dataValue = this.defaultValue;
-            }
-            if (this.hasValue()) {
-                this.restoreComponentsContext();
-            }
-        }
         this.getComponents().forEach(component => component.clearOnHide(show));
     }
-    restoreComponentsContext() {
-        this.getComponents().forEach((component) => component.data = this.dataValue);
-    }
     /**
      * Allow components to hook into the next page trigger to perform their own logic.
      * @param {Function} next - The callback to continue to the next page.
@@ -661,7 +646,7 @@ export default class NestedComponent extends Field {
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
-        if (this.conditionallyHidden) {
+        if (this.conditionallyHidden()) {
             return false;
         }
         return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));
@@ -674,7 +659,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root.hasSubWizards && this.page !== this.root.page) {
             instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);
@@ -831,7 +816,7 @@ export default class NestedComponent extends Field {
         else if (value && component.hasValue(value)) {
             return component.setValue(_.get(value, component.key), flags);
         }
-        else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {
+        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {
             flags.noValidate = !flags.dirty;
             flags.resetValue = true;
             return component.setValue(component.defaultValue, flags);
@@ -841,6 +826,13 @@ export default class NestedComponent extends Field {
         if (!value) {
             return false;
         }
+        // If the value is equal to the empty value, then this means we need to reset the values.
+        if (_.isEqual(value, this.emptyValue)) {
+            // TO-DO: For a future major release, we need to investigate removing the need for the
+            // "resetValue" flag. This seems like a hack that is no longer necessary and the renderer
+            // may behave more deterministically without it.
+            flags.resetValue = true;
+        }
         return this.getComponents().reduce((changed, component) => {
             return this.setNestedValue(component, value, flags, changed) || changed;
         }, false);

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import { Utils } from '@formio/core/utils';
 const { getComponentPaths } = Utils;
-import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
+import { componentValueTypes, isLayoutComponent } from '../../../utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.d.ts

@@ -3,11 +3,9 @@ export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue: any, oldValue: any): boolean;
     get allowData(): boolean;
     get emptyValue(): {};
-    get shouldAddDefaultValue(): boolean;
     componentContext(): any;
     getValueAsString(value: any, options: any): string;
     getDataValueAsTable(value: any, options: any): string;
-    everyComponent(fn: any, options?: {}): void;
     /**
      * Get the value of this component.
      * @returns {any} - Return the value of this component.

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -2,7 +2,7 @@
 import Component from '../component/Component';
 import NestedComponent from '../nested/NestedComponent';
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../../utils';
 export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.
@@ -90,17 +90,6 @@ export default class NestedDataComponent extends NestedComponent {
     `);
         return result;
     }
-    everyComponent(fn, options = {}) {
-        if (options?.email) {
-            if (options.fromRoot) {
-                delete options.fromRoot;
-            }
-            else {
-                return;
-            }
-        }
-        return super.everyComponent(fn, options);
-    }
     /**
      * Get the value of this component.
      * @returns {any} - Return the value of this component.

package/lib/mjs/components/address/Address.d.ts

@@ -36,12 +36,21 @@ export default class AddressComponent extends ContainerComponent {
     get autocompleteMode(): boolean;
     get manualMode(): boolean;
     get manualModeEnabled(): boolean;
+    restoreComponentsContext(): void;
     get isMultiple(): boolean;
     set address(value: any);
     get address(): any;
     isValueInLegacyFormat(value: any): any;
     normalizeValue(value: any): any;
     get modeSwitcher(): any;
+    get providerOptions(): {
+        params: any;
+        url: any;
+        queryProperty: any;
+        responseProperty: any;
+        displayValueProperty: any;
+        autocompleteOptions: any;
+    };
     get removeValueIcon(): any;
     get searchInput(): any;
     get addRowButton(): any;

package/lib/mjs/components/address/Address.js

@@ -5,7 +5,7 @@ import { GoogleAddressProvider } from '../../providers/address/GoogleAddressProv
 import Field from '../_classes/field/Field';
 import NestedComponent from '../_classes/nested/NestedComponent';
 import ContainerComponent from '../container/Container';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 export const AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',
@@ -20,7 +20,6 @@ export default class AddressComponent extends ContainerComponent {
             key: 'address',
             switchToManualModeLabel: 'Can\'t find address? Switch to manual mode.',
             provider: '',
-            providerOptions: {},
             manualModeViewString: '',
             hideLabel: false,
             disableClearIcon: false,
@@ -113,20 +112,33 @@ export default class AddressComponent extends ContainerComponent {
             NestedComponent.prototype.addComponents.call(this, this.manualMode ? this.address : {});
         }
         Field.prototype.init.call(this);
+        // Added for backwards compatibility
+        if (this.component.providerOptions) {
+            const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;
+            const key = params?.key;
+            const autocompleteOptions = params?.autocompleteOptions;
+            delete this.component.providerOptions;
+            this.component.url = url;
+            this.component.queryProperty = queryProperty;
+            this.component.responseProperty = responseProperty;
+            this.component.displayValueProperty = displayValueProperty;
+            this.component.apiKey = key;
+            this.component.autocompleteOptions = autocompleteOptions;
+        }
+        let provider = this.component.provider;
+        const providerOptions = this.providerOptions;
+        const map = this.component.map;
         if (!this.builderMode) {
-            if (this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+            if (provider) {
                 if (_.get(providerOptions, 'params.subscriptionKey')) {
                     _.set(providerOptions, "params['subscription-key']", _.get(providerOptions, 'params.subscriptionKey'));
                     _.unset(providerOptions, 'params.subscriptionKey');
                 }
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
-            else if (this.component.map) {
+            else if (map) {
                 // Fallback to legacy version where Google Maps was the only provider.
-                this.component.provider = GoogleAddressProvider.name;
-                this.component.providerOptions = this.component.providerOptions || {};
-                const { map, provider, providerOptions, } = this.component;
+                provider = this.component.provider = GoogleAddressProvider.name;
                 const { key, region, } = map;
                 if (key) {
                     _.set(providerOptions, 'params.key', key);
@@ -258,6 +270,16 @@ export default class AddressComponent extends ContainerComponent {
             ? (this.refs[AddressComponent.modeSwitcherRef] || null)
             : null;
     }
+    get providerOptions() {
+        return {
+            params: { subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey, ...this.component.params },
+            url: this.component.url,
+            queryProperty: this.component.queryProperty,
+            responseProperty: this.component.responseProperty,
+            displayValueProperty: this.component.displayValueProperty,
+            autocompleteOptions: this.component.autocompleteOptions
+        };
+    }
     get removeValueIcon() {
         return this.refs
             ? (this.refs[AddressComponent.removeValueIconRef] || null)
@@ -371,7 +393,8 @@ export default class AddressComponent extends ContainerComponent {
         const result = ((this.builderMode || this.manualMode) ? super.attach : Field.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+                const provider = this.component.provider;
+                const providerOptions = this.providerOptions;
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
         }

package/lib/mjs/components/address/editForm/Address.edit.display.d.ts

@@ -8,6 +8,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => boolean;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -15,6 +16,7 @@ declare const _default: ({
     type: string;
     input: boolean;
     key: string;
+    defaultValue: string;
     label: string;
     placeholder: string;
     tooltip: string;
@@ -32,6 +34,7 @@ declare const _default: ({
     label: string;
     tooltip: string;
     customConditional?: undefined;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -45,6 +48,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => any;
+    defaultValue?: undefined;
     validate?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/address/editForm/Address.edit.display.js

@@ -13,6 +13,7 @@ export default [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
+        defaultValue: 'Can\'t find address? Switch to manual mode.',
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -26,7 +26,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: "providerOptions.params.subscriptionKey",
+        key: "subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -41,7 +41,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.url',
+        key: 'url',
         label: 'Url',
         placeholder: 'Enter Url',
         weight: 10,
@@ -56,7 +56,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.queryProperty',
+        key: 'queryProperty',
         label: 'Query Property',
         defaultValue: 'query',
         placeholder: 'Enter Query Property',
@@ -69,7 +69,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.responseProperty',
+        key: 'responseProperty',
         label: 'Response Property',
         placeholder: 'Enter Response Property',
         weight: 30,
@@ -81,7 +81,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.displayValueProperty',
+        key: 'displayValueProperty',
         label: 'Display Value Property',
         placeholder: 'Display Value Property',
         weight: 40,
@@ -93,7 +93,7 @@ export default [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params',
+        key: 'params',
         label: 'Params',
         placeholder: '{ ... }',
         weight: 50,
@@ -108,7 +108,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.params.key',
+        key: 'apiKey',
         label: 'API Key',
         placeholder: 'Enter API Key',
         weight: 10,
@@ -123,7 +123,7 @@ export default [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params.autocompleteOptions',
+        key: 'autocompleteOptions',
         label: 'Provider options',
         placeholder: 'Enter provider options as JSON object',
         defaultValue: {},

package/lib/mjs/components/alert/Alert.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getStringFromComponentPath } from '../../utils/utils';
+import { getStringFromComponentPath } from '../../utils';
 export default class Alert {
     constructor(container, component) {
         this.container = container;

package/lib/mjs/components/button/Button.d.ts

@@ -9,7 +9,7 @@ export default class ButtonComponent extends Field {
     };
     static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
-    filesUploading: any[];
+    filesUploading: number;
     get inputInfo(): any;
     get labelInfo(): {
         hidden: boolean;

package/lib/mjs/components/button/Button.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
-import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils';
 export default class ButtonComponent extends Field {
     static schema(...extend) {
         return Input.schema({
@@ -34,7 +34,7 @@ export default class ButtonComponent extends Field {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        this.filesUploading = [];
+        this.filesUploading = 0;
     }
     get defaultSchema() {
         return ButtonComponent.schema();
@@ -142,16 +142,13 @@ export default class ButtonComponent extends Field {
                 this.addClass(this.refs.buttonMessageContainer, 'has-error');
                 this.setContent(this.refs.buttonMessage, resultMessage);
             }, true);
-            this.on('fileUploadingStart', (filePromise) => {
-                this.filesUploading.push(filePromise);
+            this.on('fileUploadingStart', () => {
+                this.filesUploading++;
                 this.disabled = true;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
-            this.on('fileUploadingEnd', (filePromise) => {
-                const index = this.filesUploading.indexOf(filePromise);
-                if (index !== -1) {
-                    this.filesUploading.splice(index, 1);
-                }
+            this.on('fileUploadingEnd', () => {
+                this.filesUploading--;
                 this.disabled = this.shouldDisabled ? true : false;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
@@ -247,7 +244,7 @@ export default class ButtonComponent extends Field {
         }
     }
     get shouldDisabled() {
-        return super.shouldDisabled || !!this.filesUploading?.length || this.isDisabledOnInvalid;
+        return super.shouldDisabled || this.filesUploading > 0 || this.isDisabledOnInvalid;
     }
     attach(element) {
         this.loadRefs(element, {

package/lib/mjs/components/checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Field from '../_classes/field/Field';
 export default class CheckBoxComponent extends Field {
     static schema(...extend) {

package/lib/mjs/components/container/Container.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils';
 import Component from '../_classes/component/Component';
 import Field from '../_classes/field/Field';
 import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';

package/lib/mjs/components/content/editForm/Content.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/currency/Currency.js

@@ -1,7 +1,7 @@
 import { createNumberMask } from '@formio/text-mask-addons';
 import { maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
-import { getCurrencyAffixes } from '../../utils/utils';
+import { getCurrencyAffixes } from '../../utils';
 import NumberComponent from '../number/Number';
 export default class CurrencyComponent extends NumberComponent {
     static schema(...extend) {

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
+import { fastCloneDeep, getFocusableElements, getComponent } from '../../utils';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -488,6 +488,10 @@ export default class DataGridComponent extends NestedArrayComponent {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
+                if (changed.component.type === 'form') {
+                    const formComp = getComponent(this.component.components, changed.component.key);
+                    _.set(formComp, 'components', changed.component.components);
+                }
                 this.triggerChange({ modified });
             };
             let columnComponent;
@@ -609,9 +613,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.updateOnChange(flags, changed);
         return changed;
     }
-    restoreComponentsContext() {
-        this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
-    }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
         _.each(this.refs.chunks[index], row => {

package/lib/mjs/components/datamap/DataMap.js

@@ -68,14 +68,10 @@ export default class DataMapComponent extends DataGridComponent {
         return {};
     }
     get dataValue() {
-        if (!this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide)) {
+        if (!this.key) {
             return this.emptyValue;
         }
-        if (!this.hasValue() && this.shouldAddDefaultValue) {
-            this.dataValue = this.emptyValue;
-        }
-        return _.get(this.data, this.key);
+        return _.get(this.data, this.key, this.emptyValue);
     }
     set dataValue(value) {
         super.dataValue = value;

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -17,7 +17,7 @@ export default class DateTimeComponent extends Input {
     };
     static savedValueTypes(schema: any): string[];
     get emptyValue(): string;
-    get momentFormat(): string;
+    get dayjsFormat(): string;
     createWrapper(): boolean;
     checkValidity(data: any, dirty: any, rowData: any): boolean;
     getValueAsString(value: any, options: any): any;

package/lib/mjs/components/datetime/DateTime.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import FormioUtils from '../../utils';
-import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
 export default class DateTimeComponent extends Input {
     static schema(...extend) {
@@ -147,8 +147,8 @@ export default class DateTimeComponent extends Input {
     get emptyValue() {
         return '';
     }
-    get momentFormat() {
-        return FormioUtils.convertFormatToMoment(this.component.format);
+    get dayjsFormat() {
+        return FormioUtils.convertFormatToDayjs(this.component.format);
     }
     isEmpty(value = this.dataValue) {
         if (value && (value.toString() === 'Invalid Date')) {
@@ -157,12 +157,14 @@ export default class DateTimeComponent extends Input {
         return super.isEmpty(value);
     }
     formatValue(input) {
-        const result = moment.utc(input).toISOString();
-        return result === 'Invalid date' ? input : result;
+        if (dayjs(input).isValid()) {
+            return dayjs.utc(input).toISOString();
+        }
+        return input;
     }
     isEqual(valueA, valueB = this.dataValue) {
         return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
+            || dayjs.utc(valueA).format(this.dayjsFormat) === dayjs.utc(valueB).format(this.dayjsFormat);
     }
     createWrapper() {
         return false;
@@ -178,18 +180,18 @@ export default class DateTimeComponent extends Input {
         return super.checkValidity(data, dirty, rowData);
     }
     getValueAsString(value, options) {
-        let format = FormioUtils.convertFormatToMoment(this.component.format);
-        format += format.match(/z$/) ? '' : ' z';
+        let format = FormioUtils.convertFormatToDayjs(this.component.format);
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
+            format += format.match(/z$/) ? '' : ' z';
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
+                return value.map(item => _.trim(FormioUtils.dayjsDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
+            return _.trim(FormioUtils.dayjsDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => _.trim(moment(item).format(format))).join(', ');
+            return value.map(item => _.trim(dayjs(item).format(format))).join(', ');
         }
-        return (value ? _.trim(moment(value).format(format)) : value) || '';
+        return (value ? _.trim(dayjs(value).format(format)) : value) || '';
     }
 }