@formio/js 5.1.0-dev.6094.c49181e → 5.1.0-dev.6096.8115e4f

package/lib/cjs/Webform.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const moment_1 = __importDefault(require("moment"));
 const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const i18n_1 = __importDefault(require("./i18n"));
@@ -12,7 +13,6 @@ const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
 const utils_1 = require("./utils/utils");
 const formUtils_1 = require("./utils/formUtils");
-const dayjs_1 = __importDefault(require("dayjs"));
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
@@ -1314,7 +1314,7 @@ class Webform extends NestedDataComponent_1.default {
         submission.metadata = submission.metadata || {};
         lodash_1.default.defaults(submission.metadata, {
             timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),
-            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, dayjs_1.default)().utcOffset()), 10),
+            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,

package/lib/cjs/WebformBuilder.d.ts

@@ -77,6 +77,7 @@ export default class WebformBuilder extends Component {
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
+    originalDefaultValue: any;
     findRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**

package/lib/cjs/WebformBuilder.js

@@ -1070,6 +1070,17 @@ class WebformBuilder extends Component_1.default {
                     'fields.month.required',
                     'fields.year.required',
                 ]));
+                if (defaultValueComponent.component.components) {
+                    if (!this.originalDefaultValue) {
+                        this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);
+                    }
+                    (0, formUtils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
+                        var _a;
+                        if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {
+                            comp.validate.required = false;
+                        }
+                    }));
+                }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
                 let index = -1;
@@ -1161,6 +1172,9 @@ class WebformBuilder extends Component_1.default {
         if (index !== -1) {
             let submissionData = this.editForm.submission.data;
             submissionData = submissionData.componentJson || submissionData;
+            if (submissionData.components && this.originalDefaultValue) {
+                submissionData.components = this.originalDefaultValue.components;
+            }
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);
             this.hook('beforeSaveComponentSettings', submissionData);

package/lib/cjs/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/cjs/components/button/Button.js

@@ -39,7 +39,7 @@ class ButtonComponent extends Field_1.default {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        this.filesUploading = [];
+        this.filesUploading = 0;
     }
     get defaultSchema() {
         return ButtonComponent.schema();
@@ -147,16 +147,13 @@ class ButtonComponent extends Field_1.default {
                 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);
@@ -252,8 +249,7 @@ class ButtonComponent extends Field_1.default {
         }
     }
     get shouldDisabled() {
-        var _a;
-        return super.shouldDisabled || !!((_a = this.filesUploading) === null || _a === void 0 ? void 0 : _a.length) || this.isDisabledOnInvalid;
+        return super.shouldDisabled || this.filesUploading > 0 || this.isDisabledOnInvalid;
     }
     attach(element) {
         this.loadRefs(element, {

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

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

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const dayjs_1 = __importDefault(require("dayjs"));
+const moment_1 = __importDefault(require("moment"));
 const utils_1 = __importDefault(require("../../utils"));
 const utils_2 = require("../../utils/utils");
 const Input_1 = __importDefault(require("../_classes/input/Input"));
@@ -123,8 +123,8 @@ class DateTimeComponent extends Input_1.default {
     get emptyValue() {
         return '';
     }
-    get dayjsFormat() {
-        return utils_1.default.convertFormatToDayjs(this.component.format);
+    get momentFormat() {
+        return utils_1.default.convertFormatToMoment(this.component.format);
     }
     isEmpty(value = this.dataValue) {
         if (value && (value.toString() === 'Invalid Date')) {
@@ -133,14 +133,12 @@ class DateTimeComponent extends Input_1.default {
         return super.isEmpty(value);
     }
     formatValue(input) {
-        if ((0, dayjs_1.default)(input).isValid()) {
-            return dayjs_1.default.utc(input).toISOString();
-        }
-        return input;
+        const result = moment_1.default.utc(input).toISOString();
+        return result === 'Invalid date' ? input : result;
     }
     isEqual(valueA, valueB = this.dataValue) {
         return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || dayjs_1.default.utc(valueA).format(this.dayjsFormat) === dayjs_1.default.utc(valueB).format(this.dayjsFormat);
+            || moment_1.default.utc(valueA).format(this.momentFormat) === moment_1.default.utc(valueB).format(this.momentFormat);
     }
     createWrapper() {
         return false;
@@ -156,19 +154,19 @@ class DateTimeComponent extends Input_1.default {
         return super.checkValidity(data, dirty, rowData);
     }
     getValueAsString(value, options) {
-        let format = utils_1.default.convertFormatToDayjs(this.component.format);
+        let format = utils_1.default.convertFormatToMoment(this.component.format);
+        format += format.match(/z$/) ? '' : ' z';
         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 => lodash_1.default.trim(utils_1.default.dayjsDate(item, format, timezone, options).format(format))).join(', ');
+                return value.map(item => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return lodash_1.default.trim(utils_1.default.dayjsDate(value, format, timezone, options).format(format));
+            return lodash_1.default.trim(utils_1.default.momentDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => lodash_1.default.trim((0, dayjs_1.default)(item).format(format))).join(', ');
+            return value.map(item => lodash_1.default.trim((0, moment_1.default)(item).format(format))).join(', ');
         }
-        return (value ? lodash_1.default.trim((0, dayjs_1.default)(value).format(format)) : value) || '';
+        return (value ? lodash_1.default.trim((0, moment_1.default)(value).format(format)) : value) || '';
     }
 }
 exports.default = DateTimeComponent;

package/lib/cjs/components/file/File.js

@@ -905,17 +905,16 @@ class FileComponent extends Field_1.default {
     }
     uploadFile(fileToSync) {
         return __awaiter(this, void 0, void 0, function* () {
-            const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
             // Progress callback
             this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
-                this.emit('fileUploadingStart', filePromise);
+                this.emit('fileUploadingStart');
             }, 
             // Abort upload callback
             (abort) => this.abortUploads.push({
                 id: fileToSync.id,
                 abort,
             }), this.getMultipartOptions(fileToSync));
-            return yield filePromise;
         });
     }
     upload() {
@@ -937,7 +936,7 @@ class FileComponent extends Field_1.default {
                     fileToSync.message = this.t('succefullyUploaded');
                     fileInfo.originalName = fileToSync.originalName;
                     fileInfo.hash = fileToSync.hash;
-                    this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
+                    this.emit('fileUploadingEnd');
                 }
                 catch (response) {
                     fileToSync.status = 'error';
@@ -947,7 +946,7 @@ class FileComponent extends Field_1.default {
                         : response.type === 'abort'
                             ? this.t('Request was aborted')
                             : response.toString();
-                    this.emit('fileUploadingEnd', Promise.reject(response));
+                    this.emit('fileUploadingEnd');
                     this.emit('fileUploadError', {
                         fileToSync,
                         response,

package/lib/cjs/providers/storage/uploadAdapter.js

@@ -27,7 +27,7 @@ class FormioUploadAdapter {
                 null,
                 null
             ];
-            const uploadPromise = this.fileService.uploadFile(...uploadParams, () => this.component.emit('fileUploadingStart', uploadPromise)).then((result) => {
+            this.fileService.uploadFile(...uploadParams, () => this.component.emit('fileUploadingStart')).then((result) => {
                 return this.fileService.downloadFile(result);
             }).then((result) => {
                 return resolve({
@@ -37,7 +37,7 @@ class FormioUploadAdapter {
                 console.warn('An Error occured while uploading file', err);
                 reject(err);
             }).finally(() => {
-                this.component.emit('fileUploadingEnd', uploadPromise);
+                this.component.emit('fileUploadingEnd');
             });
         }));
     }

package/lib/cjs/utils/utils.d.ts

@@ -164,9 +164,9 @@ export function guid(): string;
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.
- * @returns {(null|dayjs.Dayjs)} - The translated date.
+ * @returns {(null|Date)} - The translated date.
  */
-export function getDateSetting(date: string | Date): (null | dayjs.Dayjs);
+export function getDateSetting(date: string | Date): (null | Date);
 /**
  * Returns true if the date is a valid date. False otherwise.
  * @param {Date|string} date - The date to check for validity.
@@ -182,45 +182,56 @@ export function currentTimezone(): string;
  * Get an offset date provided a date object and timezone object.
  * @param {Date} date - The date to offset.
  * @param {string} timezone - The timezone to offset the date to.
- * @returns {{date: Date, abbr: string}} - The offset date.
+ * @returns {Date} - The offset date.
  */
-export function offsetDate(date: Date, timezone: string): {
-    date: Date;
-    abbr: string;
-};
+export function offsetDate(date: Date, timezone: string): Date;
+/**
+ * Returns if the zones are loaded.
+ * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
+ */
+export function zonesLoaded(): boolean;
 /**
- * Returns if we should handle a timezone difference.
+ * Returns if we should load the zones.
  * @param {string} timezone - The timezone to check if we should load the zones.
- * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
+ * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
+ */
+export function shouldLoadZones(timezone: string): boolean;
+/**
+ * Externally load the timezone data.
+ * @param {string} url - The URL to load the timezone data from.
+ * @param {string} timezone - The timezone to load.
+ * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-export function shouldHandleTimezone(timezone: string): boolean;
+export function loadZones(url: string, timezone: string): Promise<any> | any;
 /**
- * Get the Dayjs date object for translating dates with timezones.
- * @param {string|Date} value - The value to convert into a dayjs date.
+ * Get the moment date object for translating dates with timezones.
+ * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
  * @param {object} options - The options object
- * @returns {dayjs.Dayjs} - The dayjs date object.
+ * @returns {Date} - The moment date object.
  */
-export function dayjsDate(value: string | Date, format: string, timezone: string, options: object): dayjs.Dayjs;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {string|Date} value - The value to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @param {string} flatPickrInputFormat - The format to use for flatpickr input.
  * @returns {string} - The formatted date.
  */
-export function formatDate(value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
+export function formatDate(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
 /**
  * Pass a format function to format within a timezone.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {Function} formatFn - The format function to use.
  * @param {Date|string} date - The date to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @returns {string} - The formatted date.
  */
-export function formatOffset(formatFn: Function, date: Date | string, format: string, timezone: string): string;
+export function formatOffset(timezonesUrl: string, formatFn: Function, date: Date | string, format: string, timezone: string): string;
 /**
  * Returns the local date format information.
  * @param {Intl.LocalesArgument} locale - The locale to get the date format for.
@@ -238,7 +249,7 @@ export function convertFormatToFlatpickr(format: string): string;
  * @param {string} format - The format to convert.
  * @returns {string} - The converted format.
  */
-export function convertFormatToDayjs(format: string): string;
+export function convertFormatToMoment(format: string): string;
 /**
  * Convert the format from the angular-datepicker module to mask format.
  * @param {string} format - The format to convert.
@@ -505,7 +516,6 @@ export namespace componentValueTypes {
     let any: string;
 }
 export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
-import dayjs from "dayjs";
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;

package/lib/cjs/utils/utils.js

@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToDayjs = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.dayjsDate = exports.shouldHandleTimezone = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
+exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
@@ -35,13 +35,6 @@ Object.defineProperty(exports, "Evaluator", { enumerable: true, get: function ()
 const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 exports.ConditionOperators = conditionOperators_1.default;
 const core_1 = require("@formio/core");
-const dayjs_1 = __importDefault(require("dayjs"));
-const utc_1 = __importDefault(require("dayjs/plugin/utc"));
-const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
-const advancedFormat_1 = __importDefault(require("dayjs/plugin/advancedFormat"));
-dayjs_1.default.extend(timezone_1.default);
-dayjs_1.default.extend(advancedFormat_1.default);
-dayjs_1.default.extend(utc_1.default);
 const interpolate = Evaluator_1.Evaluator.interpolate;
 exports.interpolate = interpolate;
 __exportStar(require("./formUtils"), exports);
@@ -560,7 +553,7 @@ exports.guid = guid;
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.
- * @returns {(null|dayjs.Dayjs)} - The translated date.
+ * @returns {(null|Date)} - The translated date.
  */
 function getDateSetting(date) {
     if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {
@@ -580,13 +573,13 @@ function getDateSetting(date) {
     try {
         const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);
         if (typeof value === 'string') {
-            dateSetting = (0, dayjs_1.default)(value);
+            dateSetting = (0, moment_timezone_1.default)(value);
         }
         else if (typeof value.toDate === 'function') {
-            dateSetting = (0, dayjs_1.default)(value.toDate().toUTCString());
+            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());
         }
         else if (value instanceof Date) {
-            dateSetting = (0, dayjs_1.default)(value);
+            dateSetting = (0, moment_timezone_1.default)(value);
         }
     }
     catch (e) {
@@ -616,18 +609,18 @@ exports.isValidDate = isValidDate;
  * @returns {string} - The current timezone.
  */
 function currentTimezone() {
-    if (dayjs_1.default.currentTimezone) {
-        return dayjs_1.default.currentTimezone;
+    if (moment_timezone_1.default.currentTimezone) {
+        return moment_timezone_1.default.currentTimezone;
     }
-    dayjs_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();
-    return dayjs_1.default.currentTimezone;
+    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();
+    return moment_timezone_1.default.currentTimezone;
 }
 exports.currentTimezone = currentTimezone;
 /**
  * Get an offset date provided a date object and timezone object.
  * @param {Date} date - The date to offset.
  * @param {string} timezone - The timezone to offset the date to.
- * @returns {{date: Date, abbr: string}} - The offset date.
+ * @returns {Date} - The offset date.
  */
 function offsetDate(date, timezone) {
     if (timezone === 'UTC') {
@@ -636,7 +629,7 @@ function offsetDate(date, timezone) {
             abbr: 'UTC'
         };
     }
-    const dateMoment = (0, dayjs_1.default)(date).tz(timezone);
+    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);
     return {
         date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),
         abbr: dateMoment.format('z')
@@ -644,85 +637,132 @@ function offsetDate(date, timezone) {
 }
 exports.offsetDate = offsetDate;
 /**
- * Returns if we should handle a timezone difference.
+ * Returns if the zones are loaded.
+ * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
+ */
+function zonesLoaded() {
+    return moment_timezone_1.default.zonesLoaded;
+}
+exports.zonesLoaded = zonesLoaded;
+/**
+ * Returns if we should load the zones.
  * @param {string} timezone - The timezone to check if we should load the zones.
- * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
+ * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
  */
-function shouldHandleTimezone(timezone) {
-    return !(timezone === currentTimezone() || timezone === 'UTC');
+function shouldLoadZones(timezone) {
+    if (timezone === currentTimezone() || timezone === 'UTC') {
+        return false;
+    }
+    return true;
+}
+exports.shouldLoadZones = shouldLoadZones;
+/**
+ * Externally load the timezone data.
+ * @param {string} url - The URL to load the timezone data from.
+ * @param {string} timezone - The timezone to load.
+ * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
+ */
+function loadZones(url, timezone) {
+    if (timezone && !shouldLoadZones(timezone)) {
+        // Return non-resolving promise.
+        return new Promise(lodash_1.default.noop);
+    }
+    if (moment_timezone_1.default.zonesPromise) {
+        return moment_timezone_1.default.zonesPromise;
+    }
+    return moment_timezone_1.default.zonesPromise = fetch(url)
+        .then(resp => resp.json().then(zones => {
+        moment_timezone_1.default.tz.load(zones);
+        moment_timezone_1.default.zonesLoaded = true;
+        // Trigger a global event that the timezones have finished loading.
+        if (document && document.createEvent && document.body && document.body.dispatchEvent) {
+            var event = document.createEvent('Event');
+            event.initEvent('zonesLoaded', true, true);
+            document.body.dispatchEvent(event);
+        }
+    }));
 }
-exports.shouldHandleTimezone = shouldHandleTimezone;
+exports.loadZones = loadZones;
 /**
- * Get the Dayjs date object for translating dates with timezones.
- * @param {string|Date} value - The value to convert into a dayjs date.
+ * Get the moment date object for translating dates with timezones.
+ * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
  * @param {object} options - The options object
- * @returns {dayjs.Dayjs} - The dayjs date object.
+ * @returns {Date} - The moment date object.
  */
-function dayjsDate(value, format, timezone, options) {
-    const dayjsDate = (0, dayjs_1.default)(value);
+function momentDate(value, format, timezone, options) {
+    const momentDate = (0, moment_timezone_1.default)(value);
     if (!timezone) {
-        return dayjsDate;
+        return momentDate;
     }
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (shouldHandleTimezone(timezone) || (options === null || options === void 0 ? void 0 : options.email))) {
-        return dayjsDate.tz(timezone);
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {
+        return momentDate.tz(timezone);
     }
-    return dayjsDate;
+    return momentDate;
 }
-exports.dayjsDate = dayjsDate;
+exports.momentDate = momentDate;
 /**
  * Format a date provided a value, format, and timezone object.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {string|Date} value - The value to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @param {string} flatPickrInputFormat - The format to use for flatpickr input.
  * @returns {string} - The formatted date.
  */
-function formatDate(value, format, timezone, flatPickrInputFormat) {
-    const dayjsDate = (0, dayjs_1.default)(value, flatPickrInputFormat || undefined);
+function formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {
+    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);
     if (timezone === currentTimezone()) {
         // See if our format contains a "z" timezone character.
         if (format.match(/\s(z$|z\s)/)) {
-            if (shouldHandleTimezone(timezone)) {
-                return dayjsDate.tz(timezone).format(convertFormatToDayjs(format));
+            loadZones(timezonesUrl);
+            if (moment_timezone_1.default.zonesLoaded) {
+                return momentDate.tz(timezone).format(convertFormatToMoment(format));
             }
             else {
-                return dayjsDate.format(convertFormatToDayjs(format.replace(/\s(z$|z\s)/, '')));
+                return momentDate.format(convertFormatToMoment(format.replace(/\s(z$|z\s)/, '')));
             }
         }
         // Return the standard format.
-        return dayjsDate.format(convertFormatToDayjs(format));
+        return momentDate.format(convertFormatToMoment(format));
     }
     if (timezone === 'UTC') {
-        const offset = offsetDate(dayjsDate.toDate(), 'UTC');
-        return `${(0, dayjs_1.default)(offset.date).format(convertFormatToDayjs(format))} UTC`;
+        const offset = offsetDate(momentDate.toDate(), 'UTC');
+        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;
     }
-    if (shouldHandleTimezone(timezone)) {
-        return dayjsDate.tz(timezone).format(`${convertFormatToDayjs(format)} z`);
+    // Load the zones since we need timezone information.
+    loadZones(timezonesUrl);
+    if (moment_timezone_1.default.zonesLoaded && timezone) {
+        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);
+    }
+    else {
+        return momentDate.format(convertFormatToMoment(format));
     }
-    return dayjsDate.format(convertFormatToDayjs(format));
 }
 exports.formatDate = formatDate;
 /**
  * Pass a format function to format within a timezone.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {Function} formatFn - The format function to use.
  * @param {Date|string} date - The date to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @returns {string} - The formatted date.
  */
-function formatOffset(formatFn, date, format, timezone) {
+function formatOffset(timezonesUrl, formatFn, date, format, timezone) {
     if (timezone === currentTimezone()) {
         return formatFn(date, format);
     }
     if (timezone === 'UTC') {
         return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;
     }
-    if (shouldHandleTimezone(timezone)) {
+    // Load the zones since we need timezone information.
+    loadZones(timezonesUrl);
+    if (moment_timezone_1.default.zonesLoaded) {
         const offset = offsetDate(date, timezone);
         return `${formatFn(offset.date, format)} ${offset.abbr}`;
     }
@@ -782,7 +822,7 @@ exports.convertFormatToFlatpickr = convertFormatToFlatpickr;
  * @param {string} format - The format to convert.
  * @returns {string} - The converted format.
  */
-function convertFormatToDayjs(format) {
+function convertFormatToMoment(format) {
     return format
         // Year conversion.
         .replace(/y/g, 'Y')
@@ -795,7 +835,7 @@ function convertFormatToDayjs(format) {
         // Unix Timestamp
         .replace(/U/g, 'X');
 }
-exports.convertFormatToDayjs = convertFormatToDayjs;
+exports.convertFormatToMoment = convertFormatToMoment;
 /**
  * Convert the format from the angular-datepicker module to mask format.
  * @param {string} format - The format to convert.

package/lib/cjs/widgets/CalendarWidget.d.ts

@@ -22,6 +22,13 @@ export default class CalendarWidget extends InputWidget {
         minDate: string;
         maxDate: string;
     };
+    zoneLoading: boolean;
+    timezonesUrl: string;
+    /**
+     * Load the timezones.
+     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
+     */
+    loadZones(): boolean;
     attach(input: any): Promise<any>;
     defaultFormat: {
         date: string;