FIO-8541: replaced moment dependency with dayjs

gulpfile.js

@@ -88,14 +88,8 @@ gulp.task('embed-css', () => gulp.src('./dist/formio.embed.min.css').pipe(rename
 gulp.task('clean:embed-js', () => gulp.src('./dist/formio.embed.js', { read: false, allowEmpty: true }).pipe(clean()));
 gulp.task('embed-js', () => gulp.src('./dist/formio.embed.min.js').pipe(rename('formio.embed.js')).pipe(gulp.dest('./dist')));
 
-// Copy over the moment-timezones to the resource folder.
-gulp.task('timezones', () => gulp.src('./node_modules/moment-timezone/data/packed/latest.json').pipe(gulp.dest('./resources')));
-
 // Create a new build.
 gulp.task('build', gulp.series(
-  gulp.parallel(
-    'timezones'
-  ),
   gulp.parallel(
     'styles-embed',
     'styles-form',

package.json

@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.4.0-dev.2",
+    "@formio/core": "v2.4.0-dev.201.69b9c54",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -92,6 +92,7 @@
     "browser-md5-file": "^1.1.1",
     "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",
@@ -107,8 +108,6 @@
     "jstimezonedetect": "^1.0.7",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.44",
     "quill": "^2.0.2",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",

src/Element.js

@@ -3,7 +3,7 @@ import { Formio } from './Formio';
 import * as FormioUtils from './utils/utils';
 import { I18n } from './utils/i18n';
 import _ from 'lodash';
-import moment from 'moment';
+import moment from './utils/moment-wrapper';
 import maskInput from '@formio/vanilla-text-mask';
 
 /**

src/Webform.js

@@ -1,20 +1,24 @@
-import _ from 'lodash';
-import moment from 'moment';
-import { compareVersions } from 'compare-versions';
-import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
-import { Formio } from './Formio';
-import Components from './components/Components';
-import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
+
+import _ from "lodash";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc"; 
+import { compareVersions } from "compare-versions";
+import EventEmitter from "./EventEmitter";
+import i18nDefaults from "./i18n";
+import { Formio } from "./Formio";
+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';
+
+} from "./utils/utils";
+import { eachComponent } from "./utils/formUtils";
+dayjs.extend(utc);
 
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
@@ -1509,8 +1513,8 @@ export default class Webform extends NestedDataComponent {
         // Add in metadata about client submitting the form
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
-            timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            timezone: _.get(this, "_submission.metadata.timezone", currentTimezone()),
+            offset: parseInt(_.get(this, "_submission.metadata.offset", dayjs().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,

src/components/datetime/DateTime.js

@@ -1,8 +1,17 @@
 import _ from 'lodash';
-import moment from 'moment';
+import moment from '../../utils/moment-wrapper';
+import dayjs from 'dayjs';
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 import FormioUtils from '../../utils';
 import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(advancedFormat);
 
 export default class DateTimeComponent extends Input {
   static schema(...extend) {
@@ -211,8 +220,8 @@ export default class DateTimeComponent extends Input {
     }
 
     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) || '';
   }
 }

src/components/day/Day.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import Field from '../_classes/field/Field';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
 import { getDayFormat } from '@formio/core';
@@ -61,11 +61,12 @@ export default class DayComponent extends Field {
   constructor(component, options, data) {
     if (!options.inFormBuilder && !options.building) {
       if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
-        component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
-      }
-      if (component.minDate && component.minDate.indexOf('moment(') === -1) {
-        component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
+      component.maxDate = dayjs(component.maxDate, 'YYYY-MM-DD').toISOString();
+    }
+    if (component.minDate && component.minDate.indexOf('moment(') === -1) {
+      component.minDate = dayjs(component.minDate, 'YYYY-MM-DD').toISOString();
       }
+
     }
 
     super(component, options, data);

src/components/time/Time.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment from '../../utils/moment-wrapper';
 import TextFieldComponent from '../textfield/TextField';
 import { getBrowserInfo } from '../../utils/utils';
 

src/utils/calendarUtils.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment from './moment-wrapper';
 import _ from 'lodash';
 
 export const CALENDAR_ERROR_MESSAGES = {

src/utils/conditionOperators/DateGreaterThan.js

@@ -1,5 +1,5 @@
 import ConditionOperator from './ConditionOperator';
-import moment from 'moment';
+import moment from '../moment-wrapper';
 export default class DateGeaterThan extends ConditionOperator {
     static get operatorKey() {
         return 'dateGreaterThan';

src/utils/moment-wrapper.js

@@ -0,0 +1,36 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone"
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import duration from 'dayjs/plugin/duration';
+import isBetween from 'dayjs/plugin/isBetween';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(advancedFormat);
+dayjs.extend(isBetween);
+dayjs.extend(duration);
+
+/**
+ *
+ * @param {...any} args
+ */
+function moment(...args) {
+  return dayjs(...args).isValid() ? dayjs(...args) : dayjs('Invalid date');
+}
+
+moment.utc = () => dayjs.utc();
+moment.tz = (date, timezone) => dayjs.tz(date, timezone);
+
+
+moment.toISOString = () => {
+  return dayjs.isValid() ? dayjs.toISOString() : "Invalid date";
+}
+
+moment.format = (formatStr) => {
+  return dayjs(this).format(formatStr); 
+};
+
+export default moment;