@formio/js 5.1.0-dev.6086.0b0957a → 5.1.0-dev.6094.90c04d1

package/lib/cjs/widgets/CalendarWidget.js

@@ -51,29 +51,6 @@ class CalendarWidget extends InputWidget_1.default {
         else if (this.settings.time_24hr) {
             this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');
         }
-        this.zoneLoading = false;
-        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;
-    }
-    /**
-     * Load the timezones.
-     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
-     */
-    loadZones() {
-        const timezone = this.timezone;
-        if (this.zoneLoading) {
-            return true;
-        }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
-            this.zoneLoading = true;
-            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
-                this.zoneLoading = false;
-                this.emit('redraw');
-            });
-            // Return zones are loading.
-            return true;
-        }
-        // Zones are already loaded.
-        return false;
     }
     attach(input) {
         var _a;
@@ -85,7 +62,7 @@ class CalendarWidget extends InputWidget_1.default {
         };
         this.closedOn = 0;
         this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
-        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);
+        this.valueMomentFormat = (0, utils_1.convertFormatToDayjs)(this.valueFormat);
         const isReadOnly = this.settings.readOnly;
         this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);
         this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);
@@ -249,9 +226,9 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));
+            return (0, utils_1.dayjsDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToDayjs)(format));
         }
-        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));
+        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToDayjs)(format));
     }
     /**
      * Return the value of the selected date.
@@ -283,13 +260,17 @@ class CalendarWidget extends InputWidget_1.default {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;
+            value = value ? (0, utils_1.formatDate)(value, (0, utils_1.convertFormatToDayjs)(this.settings.format), this.timezone, (0, utils_1.convertFormatToDayjs)(this.valueMomentFormat)) : value;
             return super.setValue(value);
         }
-        const zonesLoading = this.loadZones();
+        // If the component is a textfield that does not have timezone information included in the string value then skip
+        // the timezone offset
+        if (this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value)) {
+            this.settings.skipOffset = true;
+        }
         if (value) {
-            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
-                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly) {
+                this.calendar.setDate((0, utils_1.dayjsDate)(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -306,9 +287,9 @@ class CalendarWidget extends InputWidget_1.default {
         const inputFormat = format || this.dateFormat;
         const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
         if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {
-            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));
+            return (0, moment_1.default)(value, (0, utils_1.convertFormatToDayjs)(valueFormat)).format((0, utils_1.convertFormatToDayjs)(valueFormat));
         }
-        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
+        return (0, utils_1.formatDate)(value, inputFormat, this.timezone, (0, utils_1.convertFormatToDayjs)(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -401,7 +382,7 @@ class CalendarWidget extends InputWidget_1.default {
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {
                 const inputValue = this.calendar.input.value;
-                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToDayjs)(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -453,14 +434,14 @@ class CalendarWidget extends InputWidget_1.default {
         return (date, format) => {
             // Only format this if this is the altFormat and the form is readOnly.
             if (this.settings.readOnly && (format === this.settings.altFormat)) {
-                if (!this.settings.enableTime || this.loadZones()) {
+                if (!this.settings.enableTime || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());
                 if (currentValue.toString() === date.toString()) {
-                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
+                    return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
                 }
-                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

package/lib/mjs/Webform.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
@@ -8,6 +7,7 @@ import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
+import dayjs from "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;
@@ -659,7 +659,9 @@ export default class Webform extends NestedDataComponent {
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
-            this.triggerCaptcha();
+            if (!this.options.server) {
+                this.triggerCaptcha();
+            }
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
                 this.onChange(flags);
@@ -1315,7 +1317,7 @@ export default class Webform extends NestedDataComponent {
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
             timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            offset: parseInt(_.get(this, '_submission.metadata.offset', dayjs().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,

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,5 +1,5 @@
 import _ from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import FormioUtils from '../../utils';
 import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
@@ -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) || '';
     }
 }

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -152,6 +152,9 @@ export default class SelectBoxesComponent extends RadioComponent {
                 }
             }
         }
+        else if (_.isEmpty(this.loadedOptions) && !checkedValues.length) {
+            value = {};
+        }
         return value;
     }
     /**

package/lib/mjs/components/textfield/TextField.js

@@ -86,8 +86,8 @@ export default class TextFieldComponent extends Input {
                 locale: this.component.widget.locale || this.options.language,
                 saveAs: 'text'
             };
-            // update originalComponent to include widget settings after component initialization 
-            // originalComponent is used to restore the component (and widget) after evaluating field logic 
+            // update originalComponent to include widget settings after component initialization
+            // originalComponent is used to restore the component (and widget) after evaluating field logic
             this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }

package/lib/mjs/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|Date)} - The translated date.
+ * @returns {(null|dayjs.Dayjs)} - The translated date.
  */
-export function getDateSetting(date: string | Date): (null | Date);
+export function getDateSetting(date: string | Date): (null | dayjs.Dayjs);
 /**
  * Returns true if the date is a valid date. False otherwise.
  * @param {Date|string} date - The date to check for validity.
@@ -182,56 +182,45 @@ 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} - The offset date.
+ * @returns {{date: Date, abbr: string}} - The offset date.
  */
-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;
+export function offsetDate(date: Date, timezone: string): {
+    date: Date;
+    abbr: string;
+};
 /**
- * Returns if we should load the zones.
+ * Returns if we should handle a timezone difference.
  * @param {string} timezone - The timezone to check if we should load the zones.
- * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
+ * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
  */
-export function shouldLoadZones(timezone: string): boolean;
+export function shouldHandleTimezone(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 loadZones(url: string, timezone: string): Promise<any> | any;
-/**
- * Get the moment date object for translating dates with timezones.
- * @param {string|Date} value - The value to convert into a moment date.
+ * Get the Dayjs date object for translating dates with timezones.
+ * @param {string|Date} value - The value to convert into a dayjs 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 {Date} - The moment date object.
+ * @returns {dayjs.Dayjs} - The dayjs date object.
  */
-export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
+export function dayjsDate(value: string | Date, format: string, timezone: string, options: object): dayjs.Dayjs;
 /**
  * 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(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
+export function formatDate(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(timezonesUrl: string, formatFn: Function, date: Date | string, format: string, timezone: string): string;
+export function formatOffset(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.
@@ -249,7 +238,7 @@ export function convertFormatToFlatpickr(format: string): string;
  * @param {string} format - The format to convert.
  * @returns {string} - The converted format.
  */
-export function convertFormatToMoment(format: string): string;
+export function convertFormatToDayjs(format: string): string;
 /**
  * Convert the format from the angular-datepicker module to mask format.
  * @param {string} format - The format to convert.
@@ -490,6 +479,15 @@ export function getFocusableElements(element: HTMLElement): NodeList<HTMLElement
  * @returns {Array<string>|null} - The saved types for the component
  */
 export function getComponentSavedTypes(fullSchema: import('@formio/core').Component): Array<string> | null;
+/**
+ * Checks if a string has timezone information encoded in it
+ * Example: 2024-01-01T00:00:00Z -> true
+ * Example: 2024-01-01T00:00:00+03:00 -> true
+ * Example: 2011-05-03T00:00:00 -> false
+ * @param {string} value the string value to check
+ * @returns {boolean} if value has encoded timezone
+ */
+export function hasEncodedTimezone(value: string): boolean;
 export * from "./formUtils";
 /**
  * Map values through unfold and return first non-nil value.
@@ -507,6 +505,7 @@ 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/mjs/utils/utils.js

@@ -9,6 +9,13 @@ import { getValue } from './formUtils';
 import { Evaluator } from './Evaluator';
 import ConditionOperators from './conditionOperators';
 import { convertShowToBoolean } from '@formio/core';
+import dayjs from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+dayjs.extend(timezone);
+dayjs.extend(advancedFormat);
+dayjs.extend(utc);
 const interpolate = Evaluator.interpolate;
 export * from './formUtils';
 // Configure JsonLogic
@@ -505,7 +512,7 @@ export function guid() {
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.
- * @returns {(null|Date)} - The translated date.
+ * @returns {(null|dayjs.Dayjs)} - The translated date.
  */
 export function getDateSetting(date) {
     if (_.isNil(date) || _.isNaN(date) || date === '') {
@@ -525,13 +532,13 @@ export function getDateSetting(date) {
     try {
         const value = Evaluator.evaluator(`return ${date};`, 'moment')(moment);
         if (typeof value === 'string') {
-            dateSetting = moment(value);
+            dateSetting = dayjs(value);
         }
         else if (typeof value.toDate === 'function') {
-            dateSetting = moment(value.toDate().toUTCString());
+            dateSetting = dayjs(value.toDate().toUTCString());
         }
         else if (value instanceof Date) {
-            dateSetting = moment(value);
+            dateSetting = dayjs(value);
         }
     }
     catch (e) {
@@ -559,17 +566,17 @@ export function isValidDate(date) {
  * @returns {string} - The current timezone.
  */
 export function currentTimezone() {
-    if (moment.currentTimezone) {
-        return moment.currentTimezone;
+    if (dayjs.currentTimezone) {
+        return dayjs.currentTimezone;
     }
-    moment.currentTimezone = jtz.determine().name();
-    return moment.currentTimezone;
+    dayjs.currentTimezone = jtz.determine().name();
+    return dayjs.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} - The offset date.
+ * @returns {{date: Date, abbr: string}} - The offset date.
  */
 export function offsetDate(date, timezone) {
     if (timezone === 'UTC') {
@@ -578,134 +585,89 @@ export function offsetDate(date, timezone) {
             abbr: 'UTC'
         };
     }
-    const dateMoment = moment(date).tz(timezone);
+    const dateMoment = dayjs(date).tz(timezone);
     return {
         date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),
         abbr: dateMoment.format('z')
     };
 }
 /**
- * Returns if the zones are loaded.
- * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
- */
-export function zonesLoaded() {
-    return moment.zonesLoaded;
-}
-/**
- * Returns if we should load the zones.
+ * Returns if we should handle a timezone difference.
  * @param {string} timezone - The timezone to check if we should load the zones.
- * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
+ * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
  */
-export function shouldLoadZones(timezone) {
-    if (timezone === currentTimezone() || timezone === 'UTC') {
-        return false;
-    }
-    return true;
-}
-/**
- * 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 loadZones(url, timezone) {
-    if (timezone && !shouldLoadZones(timezone)) {
-        // Return non-resolving promise.
-        return new Promise(_.noop);
-    }
-    if (moment.zonesPromise) {
-        return moment.zonesPromise;
-    }
-    return moment.zonesPromise = fetch(url)
-        .then(resp => resp.json().then(zones => {
-        moment.tz.load(zones);
-        moment.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);
-        }
-    }));
+export function shouldHandleTimezone(timezone) {
+    return !(timezone === currentTimezone() || timezone === 'UTC');
 }
 /**
- * Get the moment date object for translating dates with timezones.
- * @param {string|Date} value - The value to convert into a moment date.
+ * Get the Dayjs date object for translating dates with timezones.
+ * @param {string|Date} value - The value to convert into a dayjs 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 {Date} - The moment date object.
+ * @returns {dayjs.Dayjs} - The dayjs date object.
  */
-export function momentDate(value, format, timezone, options) {
-    const momentDate = moment(value);
+export function dayjsDate(value, format, timezone, options) {
+    const dayjsDate = dayjs(value);
     if (!timezone) {
-        return momentDate;
+        return dayjsDate;
     }
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment.zonesLoaded || options?.email)) {
-        return momentDate.tz(timezone);
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (shouldHandleTimezone(timezone) || options?.email)) {
+        return dayjsDate.tz(timezone);
     }
-    return momentDate;
+    return dayjsDate;
 }
 /**
  * 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(timezonesUrl, value, format, timezone, flatPickrInputFormat) {
-    const momentDate = moment(value, flatPickrInputFormat || undefined);
+export function formatDate(value, format, timezone, flatPickrInputFormat) {
+    const dayjsDate = dayjs(value, flatPickrInputFormat || undefined);
     if (timezone === currentTimezone()) {
         // See if our format contains a "z" timezone character.
         if (format.match(/\s(z$|z\s)/)) {
-            loadZones(timezonesUrl);
-            if (moment.zonesLoaded) {
-                return momentDate.tz(timezone).format(convertFormatToMoment(format));
+            if (shouldHandleTimezone(timezone)) {
+                return dayjsDate.tz(timezone).format(convertFormatToDayjs(format));
             }
             else {
-                return momentDate.format(convertFormatToMoment(format.replace(/\s(z$|z\s)/, '')));
+                return dayjsDate.format(convertFormatToDayjs(format.replace(/\s(z$|z\s)/, '')));
             }
         }
         // Return the standard format.
-        return momentDate.format(convertFormatToMoment(format));
+        return dayjsDate.format(convertFormatToDayjs(format));
     }
     if (timezone === 'UTC') {
-        const offset = offsetDate(momentDate.toDate(), 'UTC');
-        return `${moment(offset.date).format(convertFormatToMoment(format))} UTC`;
-    }
-    // Load the zones since we need timezone information.
-    loadZones(timezonesUrl);
-    if (moment.zonesLoaded && timezone) {
-        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);
+        const offset = offsetDate(dayjsDate.toDate(), 'UTC');
+        return `${dayjs(offset.date).format(convertFormatToDayjs(format))} UTC`;
     }
-    else {
-        return momentDate.format(convertFormatToMoment(format));
+    if (shouldHandleTimezone(timezone)) {
+        return dayjsDate.tz(timezone).format(`${convertFormatToDayjs(format)} z`);
     }
+    return dayjsDate.format(convertFormatToDayjs(format));
 }
 /**
  * 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(timezonesUrl, formatFn, date, format, timezone) {
+export function formatOffset(formatFn, date, format, timezone) {
     if (timezone === currentTimezone()) {
         return formatFn(date, format);
     }
     if (timezone === 'UTC') {
         return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;
     }
-    // Load the zones since we need timezone information.
-    loadZones(timezonesUrl);
-    if (moment.zonesLoaded) {
+    if (shouldHandleTimezone(timezone)) {
         const offset = offsetDate(date, timezone);
         return `${formatFn(offset.date, format)} ${offset.abbr}`;
     }
@@ -762,7 +724,7 @@ export function convertFormatToFlatpickr(format) {
  * @param {string} format - The format to convert.
  * @returns {string} - The converted format.
  */
-export function convertFormatToMoment(format) {
+export function convertFormatToDayjs(format) {
     return format
         // Year conversion.
         .replace(/y/g, 'Y')
@@ -1554,3 +1516,17 @@ export const interpolateErrors = (component, errors, interpolateFn) => {
         return { ...error, message: unescapeHTML(interpolateFn(toInterpolate, context)), context: { ...context } };
     });
 };
+/**
+ * Checks if a string has timezone information encoded in it
+ * Example: 2024-01-01T00:00:00Z -> true
+ * Example: 2024-01-01T00:00:00+03:00 -> true
+ * Example: 2011-05-03T00:00:00 -> false
+ * @param {string} value the string value to check
+ * @returns {boolean} if value has encoded timezone
+ */
+export function hasEncodedTimezone(value) {
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return (value.substring(value.length - 1) === 'z' || value.substring(value.length - 1) === 'Z' || value.match(/[+|-][0-9]{2}:[0-9]{2}$/));
+}

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

@@ -22,13 +22,6 @@ 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;