@formio/js 5.1.0-dev.6094.c49181e → 5.1.0-dev.6101.0682abe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import _ from 'lodash';
2
- import dayjs from 'dayjs';
2
+ import moment from 'moment';
3
3
  import FormioUtils from '../../utils';
4
4
  import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
5
5
  import Input from '../_classes/input/Input';
@@ -147,8 +147,8 @@ export default class DateTimeComponent extends Input {
147
147
  get emptyValue() {
148
148
  return '';
149
149
  }
150
- get dayjsFormat() {
151
- return FormioUtils.convertFormatToDayjs(this.component.format);
150
+ get momentFormat() {
151
+ return FormioUtils.convertFormatToMoment(this.component.format);
152
152
  }
153
153
  isEmpty(value = this.dataValue) {
154
154
  if (value && (value.toString() === 'Invalid Date')) {
@@ -157,14 +157,12 @@ export default class DateTimeComponent extends Input {
157
157
  return super.isEmpty(value);
158
158
  }
159
159
  formatValue(input) {
160
- if (dayjs(input).isValid()) {
161
- return dayjs.utc(input).toISOString();
162
- }
163
- return input;
160
+ const result = moment.utc(input).toISOString();
161
+ return result === 'Invalid date' ? input : result;
164
162
  }
165
163
  isEqual(valueA, valueB = this.dataValue) {
166
164
  return (this.isEmpty(valueA) && this.isEmpty(valueB))
167
- || dayjs.utc(valueA).format(this.dayjsFormat) === dayjs.utc(valueB).format(this.dayjsFormat);
165
+ || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
168
166
  }
169
167
  createWrapper() {
170
168
  return false;
@@ -180,18 +178,18 @@ export default class DateTimeComponent extends Input {
180
178
  return super.checkValidity(data, dirty, rowData);
181
179
  }
182
180
  getValueAsString(value, options) {
183
- let format = FormioUtils.convertFormatToDayjs(this.component.format);
181
+ let format = FormioUtils.convertFormatToMoment(this.component.format);
182
+ format += format.match(/z$/) ? '' : ' z';
184
183
  const timezone = this.timezone;
185
184
  if (value && !this.attached && timezone) {
186
- format += format.match(/z$/) ? '' : ' z';
187
185
  if (Array.isArray(value) && this.component.multiple) {
188
- return value.map(item => _.trim(FormioUtils.dayjsDate(item, format, timezone, options).format(format))).join(', ');
186
+ return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
189
187
  }
190
- return _.trim(FormioUtils.dayjsDate(value, format, timezone, options).format(format));
188
+ return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
191
189
  }
192
190
  if (Array.isArray(value) && this.component.multiple) {
193
- return value.map(item => _.trim(dayjs(item).format(format))).join(', ');
191
+ return value.map(item => _.trim(moment(item).format(format))).join(', ');
194
192
  }
195
- return (value ? _.trim(dayjs(value).format(format)) : value) || '';
193
+ return (value ? _.trim(moment(value).format(format)) : value) || '';
196
194
  }
197
195
  }
@@ -164,9 +164,9 @@ export function guid(): string;
164
164
  /**
165
165
  * Return a translated date setting.
166
166
  * @param {string|Date} date - The date to translate.
167
- * @returns {(null|dayjs.Dayjs)} - The translated date.
167
+ * @returns {(null|Date)} - The translated date.
168
168
  */
169
- export function getDateSetting(date: string | Date): (null | dayjs.Dayjs);
169
+ export function getDateSetting(date: string | Date): (null | Date);
170
170
  /**
171
171
  * Returns true if the date is a valid date. False otherwise.
172
172
  * @param {Date|string} date - The date to check for validity.
@@ -182,45 +182,56 @@ export function currentTimezone(): string;
182
182
  * Get an offset date provided a date object and timezone object.
183
183
  * @param {Date} date - The date to offset.
184
184
  * @param {string} timezone - The timezone to offset the date to.
185
- * @returns {{date: Date, abbr: string}} - The offset date.
185
+ * @returns {Date} - The offset date.
186
186
  */
187
- export function offsetDate(date: Date, timezone: string): {
188
- date: Date;
189
- abbr: string;
190
- };
187
+ export function offsetDate(date: Date, timezone: string): Date;
188
+ /**
189
+ * Returns if the zones are loaded.
190
+ * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
191
+ */
192
+ export function zonesLoaded(): boolean;
191
193
  /**
192
- * Returns if we should handle a timezone difference.
194
+ * Returns if we should load the zones.
193
195
  * @param {string} timezone - The timezone to check if we should load the zones.
194
- * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
196
+ * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
197
+ */
198
+ export function shouldLoadZones(timezone: string): boolean;
199
+ /**
200
+ * Externally load the timezone data.
201
+ * @param {string} url - The URL to load the timezone data from.
202
+ * @param {string} timezone - The timezone to load.
203
+ * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
195
204
  */
196
- export function shouldHandleTimezone(timezone: string): boolean;
205
+ export function loadZones(url: string, timezone: string): Promise<any> | any;
197
206
  /**
198
- * Get the Dayjs date object for translating dates with timezones.
199
- * @param {string|Date} value - The value to convert into a dayjs date.
207
+ * Get the moment date object for translating dates with timezones.
208
+ * @param {string|Date} value - The value to convert into a moment date.
200
209
  * @param {string} format - The format to convert the date to.
201
210
  * @param {string} timezone - The timezone to convert the date to.
202
211
  * @param {object} options - The options object
203
- * @returns {dayjs.Dayjs} - The dayjs date object.
212
+ * @returns {Date} - The moment date object.
204
213
  */
205
- export function dayjsDate(value: string | Date, format: string, timezone: string, options: object): dayjs.Dayjs;
214
+ export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
206
215
  /**
207
216
  * Format a date provided a value, format, and timezone object.
217
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
208
218
  * @param {string|Date} value - The value to format.
209
219
  * @param {string} format - The format to format the date to.
210
220
  * @param {string} timezone - The timezone to format the date to.
211
221
  * @param {string} flatPickrInputFormat - The format to use for flatpickr input.
212
222
  * @returns {string} - The formatted date.
213
223
  */
214
- export function formatDate(value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
224
+ export function formatDate(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
215
225
  /**
216
226
  * Pass a format function to format within a timezone.
227
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
217
228
  * @param {Function} formatFn - The format function to use.
218
229
  * @param {Date|string} date - The date to format.
219
230
  * @param {string} format - The format to format the date to.
220
231
  * @param {string} timezone - The timezone to format the date to.
221
232
  * @returns {string} - The formatted date.
222
233
  */
223
- export function formatOffset(formatFn: Function, date: Date | string, format: string, timezone: string): string;
234
+ export function formatOffset(timezonesUrl: string, formatFn: Function, date: Date | string, format: string, timezone: string): string;
224
235
  /**
225
236
  * Returns the local date format information.
226
237
  * @param {Intl.LocalesArgument} locale - The locale to get the date format for.
@@ -238,7 +249,7 @@ export function convertFormatToFlatpickr(format: string): string;
238
249
  * @param {string} format - The format to convert.
239
250
  * @returns {string} - The converted format.
240
251
  */
241
- export function convertFormatToDayjs(format: string): string;
252
+ export function convertFormatToMoment(format: string): string;
242
253
  /**
243
254
  * Convert the format from the angular-datepicker module to mask format.
244
255
  * @param {string} format - The format to convert.
@@ -505,7 +516,6 @@ export namespace componentValueTypes {
505
516
  let any: string;
506
517
  }
507
518
  export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
508
- import dayjs from "dayjs";
509
519
  import ConditionOperators from './conditionOperators';
510
520
  import { Evaluator } from './Evaluator';
511
521
  export const interpolate: typeof Evaluator.interpolate;
@@ -9,13 +9,6 @@ import { getValue } from './formUtils';
9
9
  import { Evaluator } from './Evaluator';
10
10
  import ConditionOperators from './conditionOperators';
11
11
  import { convertShowToBoolean } from '@formio/core';
12
- import dayjs from "dayjs";
13
- import utc from 'dayjs/plugin/utc';
14
- import timezone from 'dayjs/plugin/timezone';
15
- import advancedFormat from 'dayjs/plugin/advancedFormat';
16
- dayjs.extend(timezone);
17
- dayjs.extend(advancedFormat);
18
- dayjs.extend(utc);
19
12
  const interpolate = Evaluator.interpolate;
20
13
  export * from './formUtils';
21
14
  // Configure JsonLogic
@@ -512,7 +505,7 @@ export function guid() {
512
505
  /**
513
506
  * Return a translated date setting.
514
507
  * @param {string|Date} date - The date to translate.
515
- * @returns {(null|dayjs.Dayjs)} - The translated date.
508
+ * @returns {(null|Date)} - The translated date.
516
509
  */
517
510
  export function getDateSetting(date) {
518
511
  if (_.isNil(date) || _.isNaN(date) || date === '') {
@@ -532,13 +525,13 @@ export function getDateSetting(date) {
532
525
  try {
533
526
  const value = Evaluator.evaluator(`return ${date};`, 'moment')(moment);
534
527
  if (typeof value === 'string') {
535
- dateSetting = dayjs(value);
528
+ dateSetting = moment(value);
536
529
  }
537
530
  else if (typeof value.toDate === 'function') {
538
- dateSetting = dayjs(value.toDate().toUTCString());
531
+ dateSetting = moment(value.toDate().toUTCString());
539
532
  }
540
533
  else if (value instanceof Date) {
541
- dateSetting = dayjs(value);
534
+ dateSetting = moment(value);
542
535
  }
543
536
  }
544
537
  catch (e) {
@@ -566,17 +559,17 @@ export function isValidDate(date) {
566
559
  * @returns {string} - The current timezone.
567
560
  */
568
561
  export function currentTimezone() {
569
- if (dayjs.currentTimezone) {
570
- return dayjs.currentTimezone;
562
+ if (moment.currentTimezone) {
563
+ return moment.currentTimezone;
571
564
  }
572
- dayjs.currentTimezone = jtz.determine().name();
573
- return dayjs.currentTimezone;
565
+ moment.currentTimezone = jtz.determine().name();
566
+ return moment.currentTimezone;
574
567
  }
575
568
  /**
576
569
  * Get an offset date provided a date object and timezone object.
577
570
  * @param {Date} date - The date to offset.
578
571
  * @param {string} timezone - The timezone to offset the date to.
579
- * @returns {{date: Date, abbr: string}} - The offset date.
572
+ * @returns {Date} - The offset date.
580
573
  */
581
574
  export function offsetDate(date, timezone) {
582
575
  if (timezone === 'UTC') {
@@ -585,89 +578,134 @@ export function offsetDate(date, timezone) {
585
578
  abbr: 'UTC'
586
579
  };
587
580
  }
588
- const dateMoment = dayjs(date).tz(timezone);
581
+ const dateMoment = moment(date).tz(timezone);
589
582
  return {
590
583
  date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),
591
584
  abbr: dateMoment.format('z')
592
585
  };
593
586
  }
594
587
  /**
595
- * Returns if we should handle a timezone difference.
588
+ * Returns if the zones are loaded.
589
+ * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
590
+ */
591
+ export function zonesLoaded() {
592
+ return moment.zonesLoaded;
593
+ }
594
+ /**
595
+ * Returns if we should load the zones.
596
596
  * @param {string} timezone - The timezone to check if we should load the zones.
597
- * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
597
+ * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
598
598
  */
599
- export function shouldHandleTimezone(timezone) {
600
- return !(timezone === currentTimezone() || timezone === 'UTC');
599
+ export function shouldLoadZones(timezone) {
600
+ if (timezone === currentTimezone() || timezone === 'UTC') {
601
+ return false;
602
+ }
603
+ return true;
601
604
  }
602
605
  /**
603
- * Get the Dayjs date object for translating dates with timezones.
604
- * @param {string|Date} value - The value to convert into a dayjs date.
606
+ * Externally load the timezone data.
607
+ * @param {string} url - The URL to load the timezone data from.
608
+ * @param {string} timezone - The timezone to load.
609
+ * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
610
+ */
611
+ export function loadZones(url, timezone) {
612
+ if (timezone && !shouldLoadZones(timezone)) {
613
+ // Return non-resolving promise.
614
+ return new Promise(_.noop);
615
+ }
616
+ if (moment.zonesPromise) {
617
+ return moment.zonesPromise;
618
+ }
619
+ return moment.zonesPromise = fetch(url)
620
+ .then(resp => resp.json().then(zones => {
621
+ moment.tz.load(zones);
622
+ moment.zonesLoaded = true;
623
+ // Trigger a global event that the timezones have finished loading.
624
+ if (document && document.createEvent && document.body && document.body.dispatchEvent) {
625
+ var event = document.createEvent('Event');
626
+ event.initEvent('zonesLoaded', true, true);
627
+ document.body.dispatchEvent(event);
628
+ }
629
+ }));
630
+ }
631
+ /**
632
+ * Get the moment date object for translating dates with timezones.
633
+ * @param {string|Date} value - The value to convert into a moment date.
605
634
  * @param {string} format - The format to convert the date to.
606
635
  * @param {string} timezone - The timezone to convert the date to.
607
636
  * @param {object} options - The options object
608
- * @returns {dayjs.Dayjs} - The dayjs date object.
637
+ * @returns {Date} - The moment date object.
609
638
  */
610
- export function dayjsDate(value, format, timezone, options) {
611
- const dayjsDate = dayjs(value);
639
+ export function momentDate(value, format, timezone, options) {
640
+ const momentDate = moment(value);
612
641
  if (!timezone) {
613
- return dayjsDate;
642
+ return momentDate;
614
643
  }
615
644
  if (timezone === 'UTC') {
616
645
  timezone = 'Etc/UTC';
617
646
  }
618
- if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (shouldHandleTimezone(timezone) || options?.email)) {
619
- return dayjsDate.tz(timezone);
647
+ if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment.zonesLoaded || options?.email)) {
648
+ return momentDate.tz(timezone);
620
649
  }
621
- return dayjsDate;
650
+ return momentDate;
622
651
  }
623
652
  /**
624
653
  * Format a date provided a value, format, and timezone object.
654
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
625
655
  * @param {string|Date} value - The value to format.
626
656
  * @param {string} format - The format to format the date to.
627
657
  * @param {string} timezone - The timezone to format the date to.
628
658
  * @param {string} flatPickrInputFormat - The format to use for flatpickr input.
629
659
  * @returns {string} - The formatted date.
630
660
  */
631
- export function formatDate(value, format, timezone, flatPickrInputFormat) {
632
- const dayjsDate = dayjs(value, flatPickrInputFormat || undefined);
661
+ export function formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {
662
+ const momentDate = moment(value, flatPickrInputFormat || undefined);
633
663
  if (timezone === currentTimezone()) {
634
664
  // See if our format contains a "z" timezone character.
635
665
  if (format.match(/\s(z$|z\s)/)) {
636
- if (shouldHandleTimezone(timezone)) {
637
- return dayjsDate.tz(timezone).format(convertFormatToDayjs(format));
666
+ loadZones(timezonesUrl);
667
+ if (moment.zonesLoaded) {
668
+ return momentDate.tz(timezone).format(convertFormatToMoment(format));
638
669
  }
639
670
  else {
640
- return dayjsDate.format(convertFormatToDayjs(format.replace(/\s(z$|z\s)/, '')));
671
+ return momentDate.format(convertFormatToMoment(format.replace(/\s(z$|z\s)/, '')));
641
672
  }
642
673
  }
643
674
  // Return the standard format.
644
- return dayjsDate.format(convertFormatToDayjs(format));
675
+ return momentDate.format(convertFormatToMoment(format));
645
676
  }
646
677
  if (timezone === 'UTC') {
647
- const offset = offsetDate(dayjsDate.toDate(), 'UTC');
648
- return `${dayjs(offset.date).format(convertFormatToDayjs(format))} UTC`;
678
+ const offset = offsetDate(momentDate.toDate(), 'UTC');
679
+ return `${moment(offset.date).format(convertFormatToMoment(format))} UTC`;
649
680
  }
650
- if (shouldHandleTimezone(timezone)) {
651
- return dayjsDate.tz(timezone).format(`${convertFormatToDayjs(format)} z`);
681
+ // Load the zones since we need timezone information.
682
+ loadZones(timezonesUrl);
683
+ if (moment.zonesLoaded && timezone) {
684
+ return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);
685
+ }
686
+ else {
687
+ return momentDate.format(convertFormatToMoment(format));
652
688
  }
653
- return dayjsDate.format(convertFormatToDayjs(format));
654
689
  }
655
690
  /**
656
691
  * Pass a format function to format within a timezone.
692
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
657
693
  * @param {Function} formatFn - The format function to use.
658
694
  * @param {Date|string} date - The date to format.
659
695
  * @param {string} format - The format to format the date to.
660
696
  * @param {string} timezone - The timezone to format the date to.
661
697
  * @returns {string} - The formatted date.
662
698
  */
663
- export function formatOffset(formatFn, date, format, timezone) {
699
+ export function formatOffset(timezonesUrl, formatFn, date, format, timezone) {
664
700
  if (timezone === currentTimezone()) {
665
701
  return formatFn(date, format);
666
702
  }
667
703
  if (timezone === 'UTC') {
668
704
  return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;
669
705
  }
670
- if (shouldHandleTimezone(timezone)) {
706
+ // Load the zones since we need timezone information.
707
+ loadZones(timezonesUrl);
708
+ if (moment.zonesLoaded) {
671
709
  const offset = offsetDate(date, timezone);
672
710
  return `${formatFn(offset.date, format)} ${offset.abbr}`;
673
711
  }
@@ -724,7 +762,7 @@ export function convertFormatToFlatpickr(format) {
724
762
  * @param {string} format - The format to convert.
725
763
  * @returns {string} - The converted format.
726
764
  */
727
- export function convertFormatToDayjs(format) {
765
+ export function convertFormatToMoment(format) {
728
766
  return format
729
767
  // Year conversion.
730
768
  .replace(/y/g, 'Y')
@@ -22,6 +22,13 @@ export default class CalendarWidget extends InputWidget {
22
22
  minDate: string;
23
23
  maxDate: string;
24
24
  };
25
+ zoneLoading: boolean;
26
+ timezonesUrl: string;
27
+ /**
28
+ * Load the timezones.
29
+ * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
30
+ */
31
+ loadZones(): boolean;
25
32
  attach(input: any): Promise<any>;
26
33
  defaultFormat: {
27
34
  date: string;
@@ -1,6 +1,6 @@
1
1
  import { Formio } from '../Formio';
2
2
  import InputWidget from './InputWidget';
3
- import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToDayjs, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, dayjsDate, hasEncodedTimezone, } from '../utils/utils';
3
+ import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToMoment, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, momentDate, zonesLoaded, shouldLoadZones, loadZones, hasEncodedTimezone, } from '../utils/utils';
4
4
  import moment from 'moment';
5
5
  import _ from 'lodash';
6
6
  const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
@@ -46,6 +46,29 @@ export default class CalendarWidget extends InputWidget {
46
46
  else if (this.settings.time_24hr) {
47
47
  this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');
48
48
  }
49
+ this.zoneLoading = false;
50
+ this.timezonesUrl = `${Formio.cdn['moment-timezone']}/data/packed/latest.json`;
51
+ }
52
+ /**
53
+ * Load the timezones.
54
+ * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
55
+ */
56
+ loadZones() {
57
+ const timezone = this.timezone;
58
+ if (this.zoneLoading) {
59
+ return true;
60
+ }
61
+ if (!zonesLoaded() && shouldLoadZones(timezone)) {
62
+ this.zoneLoading = true;
63
+ loadZones(this.timezonesUrl, timezone).then(() => {
64
+ this.zoneLoading = false;
65
+ this.emit('redraw');
66
+ });
67
+ // Return zones are loading.
68
+ return true;
69
+ }
70
+ // Zones are already loaded.
71
+ return false;
49
72
  }
50
73
  attach(input) {
51
74
  const superAttach = super.attach(input);
@@ -56,7 +79,7 @@ export default class CalendarWidget extends InputWidget {
56
79
  };
57
80
  this.closedOn = 0;
58
81
  this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
59
- this.valueMomentFormat = convertFormatToDayjs(this.valueFormat);
82
+ this.valueMomentFormat = convertFormatToMoment(this.valueFormat);
60
83
  const isReadOnly = this.settings.readOnly;
61
84
  this.settings.minDate = isReadOnly ? null : getDateSetting(this.settings.minDate);
62
85
  this.settings.maxDate = isReadOnly ? null : getDateSetting(this.settings.maxDate);
@@ -218,9 +241,9 @@ export default class CalendarWidget extends InputWidget {
218
241
  */
219
242
  getDateValue(date, format, useTimezone) {
220
243
  if (useTimezone) {
221
- return dayjsDate(date, this.valueFormat, this.timezone).format(convertFormatToDayjs(format));
244
+ return momentDate(date, this.valueFormat, this.timezone).format(convertFormatToMoment(format));
222
245
  }
223
- return moment(date).format(convertFormatToDayjs(format));
246
+ return moment(date).format(convertFormatToMoment(format));
224
247
  }
225
248
  /**
226
249
  * Return the value of the selected date.
@@ -252,7 +275,7 @@ export default class CalendarWidget extends InputWidget {
252
275
  setValue(value) {
253
276
  const saveAsText = (this.settings.saveAs === 'text');
254
277
  if (!this.calendar) {
255
- value = value ? formatDate(value, convertFormatToDayjs(this.settings.format), this.timezone, convertFormatToDayjs(this.valueMomentFormat)) : value;
278
+ value = value ? formatDate(this.timezonesUrl, value, convertFormatToMoment(this.settings.format), this.timezone, convertFormatToMoment(this.valueMomentFormat)) : value;
256
279
  return super.setValue(value);
257
280
  }
258
281
  // If the component is a textfield that does not have timezone information included in the string value then skip
@@ -260,9 +283,10 @@ export default class CalendarWidget extends InputWidget {
260
283
  if (this.component.type === 'textfield' && !hasEncodedTimezone(value)) {
261
284
  this.settings.skipOffset = true;
262
285
  }
286
+ const zonesLoading = this.loadZones();
263
287
  if (value) {
264
- if (!saveAsText && this.settings.readOnly) {
265
- this.calendar.setDate(dayjsDate(value, this.valueFormat, this.timezone).format(), false);
288
+ if (!saveAsText && this.settings.readOnly && !zonesLoading) {
289
+ this.calendar.setDate(momentDate(value, this.valueFormat, this.timezone).format(), false);
266
290
  }
267
291
  else if (this.isValueISO8601(value)) {
268
292
  this.calendar.setDate(value, false);
@@ -279,9 +303,9 @@ export default class CalendarWidget extends InputWidget {
279
303
  const inputFormat = format || this.dateFormat;
280
304
  const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
281
305
  if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {
282
- return moment(value, convertFormatToDayjs(valueFormat)).format(convertFormatToDayjs(valueFormat));
306
+ return moment(value, convertFormatToMoment(valueFormat)).format(convertFormatToMoment(valueFormat));
283
307
  }
284
- return formatDate(value, inputFormat, this.timezone, convertFormatToDayjs(valueFormat));
308
+ return formatDate(this.timezonesUrl, value, inputFormat, this.timezone, convertFormatToMoment(valueFormat));
285
309
  }
286
310
  setErrorClasses(hasErrors) {
287
311
  if (!this.input) {
@@ -372,7 +396,7 @@ export default class CalendarWidget extends InputWidget {
372
396
  const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
373
397
  if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {
374
398
  const inputValue = this.calendar.input.value;
375
- const dateValue = inputValue ? moment(this.calendar.input.value, convertFormatToDayjs(this.valueFormat)).toDate() : inputValue;
399
+ const dateValue = inputValue ? moment(this.calendar.input.value, convertFormatToMoment(this.valueFormat)).toDate() : inputValue;
376
400
  this.calendar.setDate(dateValue, true, this.settings.altFormat);
377
401
  }
378
402
  else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -424,14 +448,14 @@ export default class CalendarWidget extends InputWidget {
424
448
  return (date, format) => {
425
449
  // Only format this if this is the altFormat and the form is readOnly.
426
450
  if (this.settings.readOnly && (format === this.settings.altFormat)) {
427
- if (!this.settings.enableTime || this.settings.skipOffset) {
451
+ if (!this.settings.enableTime || this.loadZones() || this.settings.skipOffset) {
428
452
  return Flatpickr.formatDate(date, format);
429
453
  }
430
454
  const currentValue = new Date(this.getValue());
431
455
  if (currentValue.toString() === date.toString()) {
432
- return formatOffset(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
456
+ return formatOffset(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
433
457
  }
434
- return formatOffset(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
458
+ return formatOffset(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
435
459
  }
436
460
  return Flatpickr.formatDate(date, format);
437
461
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formio/js",
3
- "version": "5.1.0-dev.6094.c49181e",
3
+ "version": "5.1.0-dev.6101.0682abe",
4
4
  "description": "JavaScript powered Forms with JSON Form Builder",
5
5
  "main": "lib/cjs/index.js",
6
6
  "exports": {
@@ -92,7 +92,6 @@
92
92
  "choices.js": "^11.0.6",
93
93
  "compare-versions": "^6.1.1",
94
94
  "core-js": "^3.37.1",
95
- "dayjs": "^1.11.13",
96
95
  "dialog-polyfill": "^0.5.6",
97
96
  "dom-autoscroller": "^2.3.4",
98
97
  "dompurify": "^3.1.6",