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