@formio/js 5.0.0-rc.10

package/lib/mjs/components/datetime/DateTime.js

@@ -0,0 +1,161 @@
+import _ from 'lodash';
+import moment from 'moment';
+import Input from '../_classes/input/Input';
+import FormioUtils from '../../utils';
+export default class DateTimeComponent extends Input {
+    static schema(...extend) {
+        return Input.schema({
+            type: 'datetime',
+            label: 'Date / Time',
+            key: 'dateTime',
+            format: 'yyyy-MM-dd hh:mm a',
+            useLocaleSettings: false,
+            allowInput: true,
+            enableDate: true,
+            enableTime: true,
+            defaultValue: '',
+            defaultDate: '',
+            displayInTimezone: 'viewer',
+            timezone: '',
+            datepickerMode: 'day',
+            datePicker: {
+                showWeeks: true,
+                startingDay: 0,
+                initDate: '',
+                minMode: 'day',
+                maxMode: 'year',
+                yearRows: 4,
+                yearColumns: 5,
+                minDate: null,
+                maxDate: null
+            },
+            timePicker: {
+                hourStep: 1,
+                minuteStep: 1,
+                showMeridian: true,
+                readonlyInput: false,
+                mousewheel: true,
+                arrowkeys: true
+            },
+            customOptions: {},
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Date / Time',
+            group: 'advanced',
+            icon: 'calendar',
+            documentation: '/userguide/form-building/advanced-components#date-and-time',
+            weight: 40,
+            schema: DateTimeComponent.schema()
+        };
+    }
+    constructor(component, options, data) {
+        super(component, options, data);
+        const timezone = (this.component.timezone || this.options.timezone);
+        const time24hr = !_.get(this.component, 'timePicker.showMeridian', true);
+        // Change the format to map to the settings.
+        if (!this.component.enableDate) {
+            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');
+        }
+        if (!this.component.enableTime) {
+            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');
+        }
+        else if (time24hr) {
+            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');
+        }
+        else {
+            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');
+        }
+        let customOptions = this.component.customOptions || {};
+        if (typeof customOptions === 'string') {
+            try {
+                customOptions = JSON.parse(customOptions);
+            }
+            catch (err) {
+                console.warn(err.message);
+                customOptions = {};
+            }
+        }
+        /* eslint-disable camelcase */
+        this.component.widget = {
+            type: 'calendar',
+            timezone,
+            displayInTimezone: _.get(this.component, 'displayInTimezone', 'viewer'),
+            locale: this.options.language,
+            useLocaleSettings: _.get(this.component, 'useLocaleSettings', false),
+            allowInput: _.get(this.component, 'allowInput', true),
+            mode: 'single',
+            enableTime: _.get(this.component, 'enableTime', true),
+            noCalendar: !_.get(this.component, 'enableDate', true),
+            format: this.component.format,
+            hourIncrement: _.get(this.component, 'timePicker.hourStep', 1),
+            minuteIncrement: _.get(this.component, 'timePicker.minuteStep', 5),
+            time_24hr: time24hr,
+            readOnly: this.options.readOnly,
+            minDate: _.get(this.component, 'datePicker.minDate'),
+            disabledDates: _.get(this.component, 'datePicker.disable'),
+            disableWeekends: _.get(this.component, 'datePicker.disableWeekends'),
+            disableWeekdays: _.get(this.component, 'datePicker.disableWeekdays'),
+            disableFunction: _.get(this.component, 'datePicker.disableFunction'),
+            maxDate: _.get(this.component, 'datePicker.maxDate'),
+            ...customOptions,
+        };
+        /* eslint-enable camelcase */
+        // Add the validators date.
+        this.validators.push('date');
+    }
+    get defaultSchema() {
+        return DateTimeComponent.schema();
+    }
+    get defaultValue() {
+        let defaultValue = super.defaultValue;
+        if (!defaultValue && this.component.defaultDate) {
+            defaultValue = FormioUtils.getDateSetting(this.component.defaultDate);
+            defaultValue = defaultValue ? defaultValue.toISOString() : '';
+        }
+        return defaultValue;
+    }
+    get emptyValue() {
+        return '';
+    }
+    get momentFormat() {
+        return FormioUtils.convertFormatToMoment(this.component.format);
+    }
+    isEmpty(value = this.dataValue) {
+        if (value && (value.toString() === 'Invalid Date')) {
+            return true;
+        }
+        return super.isEmpty(value);
+    }
+    formatValue(input) {
+        const result = moment.utc(input).toISOString();
+        return result === 'Invalid date' ? input : result;
+    }
+    isEqual(valueA, valueB = this.dataValue) {
+        return (this.isEmpty(valueA) && this.isEmpty(valueB))
+            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
+    }
+    createWrapper() {
+        return false;
+    }
+    checkValidity(data, dirty, rowData) {
+        if (this.refs.input) {
+            this.refs.input.forEach((input) => {
+                if (input.widget && input.widget.enteredDate) {
+                    dirty = true;
+                }
+            });
+        }
+        return super.checkValidity(data, dirty, rowData);
+    }
+    getValueAsString(value) {
+        let format = FormioUtils.convertFormatToMoment(this.component.format);
+        format += format.match(/z$/) ? '' : ' z';
+        const timezone = this.timezone;
+        if (value && !this.attached && timezone) {
+            return _.trim(FormioUtils.momentDate(value, format, timezone).format(format));
+        }
+        return (value ? _.trim(moment(value).format(format)) : value) || '';
+    }
+}

package/lib/mjs/components/datetime/editForm/DateTime.edit.data.d.ts

@@ -0,0 +1,24 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    weight: number;
+    as?: undefined;
+    editor?: undefined;
+    defaultValue?: undefined;
+} | {
+    type: string;
+    as: string;
+    editor: string;
+    weight: number;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    defaultValue: {};
+    placeholder?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.data.js

@@ -0,0 +1,21 @@
+export default [
+    {
+        type: 'textfield',
+        input: true,
+        key: 'defaultDate',
+        label: 'Default Date',
+        placeholder: 'moment()',
+        tooltip: 'You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, \'days\')',
+        weight: 6
+    }, {
+        type: 'textarea',
+        as: 'json',
+        editor: 'ace',
+        weight: 28,
+        input: true,
+        key: 'customOptions',
+        label: 'Flatpickr options',
+        tooltip: 'A raw JSON object to use as options for the Date / Time component (Flatpickr).',
+        defaultValue: {},
+    },
+];

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.d.ts

@@ -0,0 +1,61 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    weight: number;
+    tooltip: string;
+    placeholder?: undefined;
+    validate?: undefined;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    validate: {
+        custom: string;
+    };
+    weight: number;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    title: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    style: {
+        'margin-bottom': string;
+    };
+    key: string;
+    customConditional(): boolean;
+    components: ({
+        type: string;
+        tag: string;
+        content: string;
+    } | {
+        type: string;
+        input: boolean;
+        editor: string;
+        key: string;
+        label: string;
+        description: string;
+        weight: number;
+    })[];
+    input?: undefined;
+    label?: undefined;
+    weight?: undefined;
+    tooltip?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.js

@@ -0,0 +1,70 @@
+import Evaluator from '../../../utils/Evaluator';
+import EditFormUtils from '../../_classes/component/editForm/utils';
+export default [
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'enableDate',
+        label: 'Enable Date Input',
+        weight: 0,
+        tooltip: 'Enables date input for this field.'
+    },
+    {
+        type: 'tags',
+        input: true,
+        key: 'datePicker.disable',
+        label: 'Disable specific dates or dates by range',
+        placeholder: '(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)',
+        tooltip: 'Add dates that you want to blacklist. For example: \n \n 2025-02-21',
+        validate: {
+            custom: 'if (_.isEmpty(input)) {\n  return true;\n}\nconst dates = _.isArray(input) ?\ninput : input.split(component.delimeter);\nconst isValid = _.every(dates, (data) => \n  !!data.match(/\\d{4}-\\d{2}-\\d{2}/g));\nvalid = isValid || \'Invalid date\';'
+        },
+        weight: 21
+    },
+    {
+        type: 'panel',
+        title: 'Custom Disabled Dates',
+        collapsible: true,
+        collapsed: true,
+        style: { 'margin-bottom': '10px' },
+        key: 'panel-disable-function',
+        customConditional() {
+            return !Evaluator.noeval || Evaluator.protectedEval;
+        },
+        components: [
+            EditFormUtils.logicVariablesTable('<tr><th>date</th><td>The date object.</td></tr>'),
+            {
+                type: 'textarea',
+                input: true,
+                editor: 'ace',
+                key: 'datePicker.disableFunction',
+                label: 'Disabling dates by a function',
+                description: 'For more information check out the <a href="https://flatpickr.js.org/examples/#disabling-dates" target="_blank" rel="noopener noreferrer">Docs</a>',
+                weight: 22
+            },
+            {
+                type: 'htmlelement',
+                tag: 'div',
+                content: '<h4>Example</h4>' +
+                    `<pre>// Disable all weekends<br>date.getDay() === 0 || date.getDay() === 6</pre>
+          `
+            }
+        ]
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'datePicker.disableWeekends',
+        label: 'Disable weekends',
+        tooltip: 'Check to disable weekends',
+        weight: 23
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'datePicker.disableWeekdays',
+        label: 'Disable weekdays',
+        tooltip: 'Check to disable weekdays',
+        weight: 23
+    }
+];

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.d.ts

@@ -0,0 +1,128 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    defaultValue: string;
+    dataSrc: string;
+    data: {
+        values: {
+            label: string;
+            value: string;
+        }[];
+        url?: undefined;
+    };
+    lazyLoad?: undefined;
+    valueProperty?: undefined;
+    template?: undefined;
+    conditional?: undefined;
+    placeholder?: undefined;
+    description?: undefined;
+    templates?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    lazyLoad: boolean;
+    defaultValue: string;
+    valueProperty: string;
+    dataSrc: string;
+    data: {
+        url: string;
+        values?: undefined;
+    };
+    template: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+        };
+    };
+    placeholder?: undefined;
+    description?: undefined;
+    templates?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    lazyLoad?: undefined;
+    valueProperty?: undefined;
+    template?: undefined;
+    conditional?: undefined;
+    placeholder?: undefined;
+    description?: undefined;
+    templates?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    description: string;
+    tooltip: string;
+    weight: number;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    lazyLoad?: undefined;
+    valueProperty?: undefined;
+    template?: undefined;
+    conditional?: undefined;
+    templates?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    description: string;
+    templates: {
+        header: string;
+        row: string;
+    };
+    components: ({
+        label: string;
+        key: string;
+        type: string;
+        input: boolean;
+        validate: {
+            required: boolean;
+        };
+        editor?: undefined;
+    } | {
+        label: string;
+        key: string;
+        type: string;
+        editor: string;
+        input: boolean;
+        validate: {
+            required: boolean;
+        };
+    })[];
+    defaultValue: never[];
+    tooltip?: undefined;
+    weight?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    lazyLoad?: undefined;
+    valueProperty?: undefined;
+    template?: undefined;
+    conditional?: undefined;
+    placeholder?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.js

@@ -0,0 +1,98 @@
+export default [
+    {
+        type: 'select',
+        input: true,
+        key: 'displayInTimezone',
+        label: 'Display in Timezone',
+        tooltip: 'This will display the captured date time in the select timezone.',
+        weight: 30,
+        defaultValue: 'viewer',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'of Viewer', value: 'viewer' },
+                { label: 'of Submission', value: 'submission' },
+                { label: 'of Location', value: 'location' },
+                { label: 'UTC', value: 'utc' }
+            ]
+        }
+    },
+    {
+        type: 'select',
+        input: true,
+        key: 'timezone',
+        label: 'Select Timezone',
+        tooltip: 'Select the timezone you wish to display this Date',
+        weight: 31,
+        lazyLoad: true,
+        defaultValue: '',
+        valueProperty: 'name',
+        dataSrc: 'url',
+        data: {
+            url: '{{options.cdnUrl}}/timezones.json'
+        },
+        template: '<span>{{ item.label }}</span>',
+        conditional: {
+            json: { '===': [{ var: 'data.displayInTimezone' }, 'location'] }
+        }
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'useLocaleSettings',
+        label: 'Use Locale Settings',
+        tooltip: 'Use locale settings to display date and time.',
+        weight: 51
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'allowInput',
+        label: 'Allow Manual Input',
+        tooltip: 'Check this if you would like to allow the user to manually enter in the date.',
+        weight: 51
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'format',
+        label: 'Format',
+        placeholder: 'Format',
+        description: 'Use formats provided by <a href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser/docs#uibdateparsers-format-codes" target="_blank" rel="noopener noreferrer">DateParser Codes</a>',
+        tooltip: 'The date format for displaying the datetime value.',
+        weight: 52
+    },
+    {
+        type: 'editgrid',
+        input: true,
+        key: 'shortcutButtons',
+        label: 'Shortcut Buttons',
+        description: 'You can specify few buttons which will be shown above the calendar. Use Label to specify the name of the button and onClick to specify which date/time will be set when user clicks the button. E.g, date = new Date()',
+        templates: {
+            header: '<div class="row">\n  <div class="col-sm-3">Label</div>\n  <div class="col-sm-6">onClick</div>\n</div>',
+            row: '<div class="row">\n      <div class="col-sm-3">\n        {{ flattenedComponents.label.getView(row.label) }}\n      </div>\n      <div class="col-sm-6">\n        {{ flattenedComponents.onClick.getView(row.onClick) }}\n      </div>\n      {% if (!instance.disabled) { %}\n        <div class="col-sm-3">\n          <div class="btn-group pull-right">\n            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass("edit") }}"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass("trash") }}"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>'
+        },
+        components: [
+            {
+                label: 'Label',
+                key: 'label',
+                type: 'textfield',
+                input: true,
+                validate: {
+                    required: true
+                }
+            },
+            {
+                label: 'onClick',
+                key: 'onClick',
+                type: 'textarea',
+                editor: 'ace',
+                input: true,
+                validate: {
+                    required: true
+                }
+            }
+        ],
+        defaultValue: []
+    }
+];

package/lib/mjs/components/datetime/editForm/DateTime.edit.time.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+}[];
+export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.time.js

@@ -0,0 +1,34 @@
+export default [
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'enableTime',
+        label: 'Enable Time Input',
+        tooltip: 'Enables time input for this field.',
+        weight: 0
+    },
+    {
+        type: 'number',
+        input: true,
+        key: 'timePicker.hourStep',
+        label: 'Hour Step Size',
+        tooltip: 'The number of hours to increment/decrement in the time picker.',
+        weight: 10
+    },
+    {
+        type: 'number',
+        input: true,
+        key: 'timePicker.minuteStep',
+        label: 'Minute Step Size',
+        tooltip: 'The number of minutes to increment/decrement in the time picker.',
+        weight: 20
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        key: 'timePicker.showMeridian',
+        label: '12 Hour Time (AM/PM)',
+        tooltip: 'Display time in 12 hour time with AM/PM.',
+        weight: 30
+    }
+];

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -0,0 +1,40 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    persistent: boolean;
+    weight: number;
+    tooltip: string;
+    skipMerge?: undefined;
+    enableTime?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    skipMerge: boolean;
+    weight: number;
+    tooltip: string;
+    customConditional({ data, component }: {
+        data: any;
+        component: any;
+    }): boolean;
+    persistent?: undefined;
+    enableTime?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    enableTime: boolean;
+    key: string;
+    skipMerge: boolean;
+    label: string;
+    weight: number;
+    tooltip: string;
+    customConditional({ data, component }: {
+        data: any;
+        component: any;
+    }): any;
+    persistent?: undefined;
+})[];
+export default _default;