@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.
- package/dist/formio.form.js +4 -4
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +4 -4
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.utils.js +1 -1
- package/dist/formio.utils.min.js +1 -1
- package/lib/cjs/Webform.js +2 -2
- package/lib/cjs/components/datetime/DateTime.d.ts +1 -1
- package/lib/cjs/components/datetime/DateTime.js +12 -14
- package/lib/cjs/utils/utils.d.ts +28 -18
- package/lib/cjs/utils/utils.js +89 -49
- package/lib/cjs/widgets/CalendarWidget.d.ts +7 -0
- package/lib/cjs/widgets/CalendarWidget.js +36 -12
- package/lib/mjs/Webform.js +2 -2
- package/lib/mjs/components/datetime/DateTime.d.ts +1 -1
- package/lib/mjs/components/datetime/DateTime.js +12 -14
- package/lib/mjs/utils/utils.d.ts +28 -18
- package/lib/mjs/utils/utils.js +82 -44
- package/lib/mjs/widgets/CalendarWidget.d.ts +7 -0
- package/lib/mjs/widgets/CalendarWidget.js +37 -13
- package/package.json +1 -2
@@ -1,5 +1,5 @@
|
|
1
1
|
import _ from 'lodash';
|
2
|
-
import
|
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
|
151
|
-
return FormioUtils.
|
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
|
-
|
161
|
-
|
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
|
-
||
|
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.
|
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.
|
186
|
+
return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
|
189
187
|
}
|
190
|
-
return _.trim(FormioUtils.
|
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(
|
191
|
+
return value.map(item => _.trim(moment(item).format(format))).join(', ');
|
194
192
|
}
|
195
|
-
return (value ? _.trim(
|
193
|
+
return (value ? _.trim(moment(value).format(format)) : value) || '';
|
196
194
|
}
|
197
195
|
}
|
package/lib/mjs/utils/utils.d.ts
CHANGED
@@ -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|
|
167
|
+
* @returns {(null|Date)} - The translated date.
|
168
168
|
*/
|
169
|
-
export function getDateSetting(date: string | Date): (null |
|
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 {
|
185
|
+
* @returns {Date} - The offset date.
|
186
186
|
*/
|
187
|
-
export function offsetDate(date: Date, timezone: string):
|
188
|
-
|
189
|
-
|
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
|
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
|
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
|
205
|
+
export function loadZones(url: string, timezone: string): Promise<any> | any;
|
197
206
|
/**
|
198
|
-
* Get the
|
199
|
-
* @param {string|Date} value - The value to convert into a
|
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 {
|
212
|
+
* @returns {Date} - The moment date object.
|
204
213
|
*/
|
205
|
-
export function
|
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
|
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;
|
package/lib/mjs/utils/utils.js
CHANGED
@@ -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|
|
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 =
|
528
|
+
dateSetting = moment(value);
|
536
529
|
}
|
537
530
|
else if (typeof value.toDate === 'function') {
|
538
|
-
dateSetting =
|
531
|
+
dateSetting = moment(value.toDate().toUTCString());
|
539
532
|
}
|
540
533
|
else if (value instanceof Date) {
|
541
|
-
dateSetting =
|
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 (
|
570
|
-
return
|
562
|
+
if (moment.currentTimezone) {
|
563
|
+
return moment.currentTimezone;
|
571
564
|
}
|
572
|
-
|
573
|
-
return
|
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 {
|
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 =
|
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
|
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
|
597
|
+
* @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
|
598
598
|
*/
|
599
|
-
export function
|
600
|
-
|
599
|
+
export function shouldLoadZones(timezone) {
|
600
|
+
if (timezone === currentTimezone() || timezone === 'UTC') {
|
601
|
+
return false;
|
602
|
+
}
|
603
|
+
return true;
|
601
604
|
}
|
602
605
|
/**
|
603
|
-
*
|
604
|
-
* @param {string
|
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 {
|
637
|
+
* @returns {Date} - The moment date object.
|
609
638
|
*/
|
610
|
-
export function
|
611
|
-
const
|
639
|
+
export function momentDate(value, format, timezone, options) {
|
640
|
+
const momentDate = moment(value);
|
612
641
|
if (!timezone) {
|
613
|
-
return
|
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)/))) && (
|
619
|
-
return
|
647
|
+
if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment.zonesLoaded || options?.email)) {
|
648
|
+
return momentDate.tz(timezone);
|
620
649
|
}
|
621
|
-
return
|
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
|
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
|
-
|
637
|
-
|
666
|
+
loadZones(timezonesUrl);
|
667
|
+
if (moment.zonesLoaded) {
|
668
|
+
return momentDate.tz(timezone).format(convertFormatToMoment(format));
|
638
669
|
}
|
639
670
|
else {
|
640
|
-
return
|
671
|
+
return momentDate.format(convertFormatToMoment(format.replace(/\s(z$|z\s)/, '')));
|
641
672
|
}
|
642
673
|
}
|
643
674
|
// Return the standard format.
|
644
|
-
return
|
675
|
+
return momentDate.format(convertFormatToMoment(format));
|
645
676
|
}
|
646
677
|
if (timezone === 'UTC') {
|
647
|
-
const offset = offsetDate(
|
648
|
-
return `${
|
678
|
+
const offset = offsetDate(momentDate.toDate(), 'UTC');
|
679
|
+
return `${moment(offset.date).format(convertFormatToMoment(format))} UTC`;
|
649
680
|
}
|
650
|
-
|
651
|
-
|
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
|
-
|
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
|
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,
|
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 =
|
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
|
244
|
+
return momentDate(date, this.valueFormat, this.timezone).format(convertFormatToMoment(format));
|
222
245
|
}
|
223
|
-
return moment(date).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,
|
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(
|
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,
|
306
|
+
return moment(value, convertFormatToMoment(valueFormat)).format(convertFormatToMoment(valueFormat));
|
283
307
|
}
|
284
|
-
return formatDate(value, inputFormat, this.timezone,
|
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,
|
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.
|
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",
|