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

package/lib/mjs/widgets/CalendarWidget.js

@@ -1,6 +1,6 @@
 import { Formio } from '../Formio';
 import InputWidget from './InputWidget';
-import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToMoment, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, momentDate, zonesLoaded, shouldLoadZones, loadZones, } from '../utils/utils';
+import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToDayjs, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, dayjsDate, hasEncodedTimezone, } from '../utils/utils';
 import moment from 'moment';
 import _ from 'lodash';
 const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
@@ -46,29 +46,6 @@ export default class CalendarWidget extends InputWidget {
         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.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 (!zonesLoaded() && shouldLoadZones(timezone)) {
-            this.zoneLoading = true;
-            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) {
         const superAttach = super.attach(input);
@@ -79,7 +56,7 @@ export default class CalendarWidget extends InputWidget {
         };
         this.closedOn = 0;
         this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
-        this.valueMomentFormat = convertFormatToMoment(this.valueFormat);
+        this.valueMomentFormat = convertFormatToDayjs(this.valueFormat);
         const isReadOnly = this.settings.readOnly;
         this.settings.minDate = isReadOnly ? null : getDateSetting(this.settings.minDate);
         this.settings.maxDate = isReadOnly ? null : getDateSetting(this.settings.maxDate);
@@ -241,9 +218,9 @@ export default class CalendarWidget extends InputWidget {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return momentDate(date, this.valueFormat, this.timezone).format(convertFormatToMoment(format));
+            return dayjsDate(date, this.valueFormat, this.timezone).format(convertFormatToDayjs(format));
         }
-        return moment(date).format(convertFormatToMoment(format));
+        return moment(date).format(convertFormatToDayjs(format));
     }
     /**
      * Return the value of the selected date.
@@ -275,13 +252,17 @@ export default class CalendarWidget extends InputWidget {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? formatDate(this.timezonesUrl, value, convertFormatToMoment(this.settings.format), this.timezone, convertFormatToMoment(this.valueMomentFormat)) : value;
+            value = value ? formatDate(value, convertFormatToDayjs(this.settings.format), this.timezone, 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' && !hasEncodedTimezone(value)) {
+            this.settings.skipOffset = true;
+        }
         if (value) {
-            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
-                this.calendar.setDate(momentDate(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly) {
+                this.calendar.setDate(dayjsDate(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -298,9 +279,9 @@ export default class CalendarWidget extends InputWidget {
         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 moment(value, convertFormatToMoment(valueFormat)).format(convertFormatToMoment(valueFormat));
+            return moment(value, convertFormatToDayjs(valueFormat)).format(convertFormatToDayjs(valueFormat));
         }
-        return formatDate(this.timezonesUrl, value, inputFormat, this.timezone, convertFormatToMoment(valueFormat));
+        return formatDate(value, inputFormat, this.timezone, convertFormatToDayjs(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -391,7 +372,7 @@ export default class CalendarWidget extends InputWidget {
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {
                 const inputValue = this.calendar.input.value;
-                const dateValue = inputValue ? moment(this.calendar.input.value, convertFormatToMoment(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? moment(this.calendar.input.value, convertFormatToDayjs(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -443,14 +424,14 @@ export default class CalendarWidget extends InputWidget {
         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 formatOffset(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
+                    return formatOffset(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
                 }
-                return formatOffset(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return formatOffset(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6086.0b0957a",
+  "version": "5.1.0-dev.6094.90c04d1",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -92,6 +92,7 @@
     "choices.js": "^11.0.6",
     "compare-versions": "^6.1.1",
     "core-js": "^3.37.1",
+    "dayjs": "^1.11.13",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
     "dompurify": "^3.1.6",
@@ -108,7 +109,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "moment-timezone": "^0.5.44",
+    "moment-timezone": "^0.5.48",
     "quill": "^2.0.2",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",