search

formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.9k stars 1.07k forks source link

[BUG] Date tiome fields are not allowing use of the data variable in the custom disable dates function. #3125

Closed strets123 closed 9 months ago

strets123 commented 4 years ago

Environment

Please provide as many details as you can:

Steps to Reproduce

  1. Create a form with a Select field (for customer) and Object storage using a URL like my one here: https://cnod29aovb.execute-api.eu-west-1.amazonaws.com/example
  2. Create a date time field in the form
  3. Create a custom function on the date time to vary the minimum date according to the "leadTimeDays" field on the customer object

Expected behavior

Observed behavior

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

Here is a link to my deployed form

https://pro.formview.io/#/eixfevfdchjtmuo/datefields?header=1&reset=1

Here is my function configuration - I expect data to be available as per the instructions for the custom disable dates field. image

Here is what happens when I use the form image

I am evaluating Form.io for use in the order entry process for a number of high profile customers. It would be great to hear back in the next couple of weeks after my holiday as complex date functionality is a big part of this application.

I would consider authoring a fix give a few clues where to look in the code.

Here is my JSON definition:

{
    "_id": "5f2d4996a128f0485c6d7073",
    "type": "form",
    "tags": [],
    "owner": "5f2a92463b96b904f868191b",
    "components": [{
        "label": "Customer",
        "widget": "choicesjs",
        "tableView": true,
        "dataSrc": "url",
        "data": {
            "values": [{
                "label": "",
                "value": ""
            }],
            "url": "https://cnod29aovb.execute-api.eu-west-1.amazonaws.com/example",
            "headers": [{
                "key": "",
                "value": ""
            }],
            "json": "",
            "resource": "",
            "custom": ""
        },
        "dataType": "object",
        "template": "<span>{{ item.soldToName }}</span>",
        "selectThreshold": 0.3,
        "key": "select",
        "type": "select",
        "indexeddb": {
            "filter": {}
        },
        "input": true,
        "disableLimit": false,
        "placeholder": "",
        "prefix": "",
        "customClass": "",
        "suffix": "",
        "multiple": false,
        "defaultValue": null,
        "protected": false,
        "unique": false,
        "persistent": true,
        "hidden": false,
        "clearOnHide": true,
        "refreshOn": "",
        "redrawOn": "",
        "modalEdit": false,
        "labelPosition": "top",
        "description": "",
        "errorLabel": "",
        "tooltip": "",
        "hideLabel": false,
        "tabindex": "",
        "disabled": false,
        "autofocus": false,
        "dbIndex": false,
        "customDefaultValue": "",
        "calculateValue": "",
        "calculateServer": false,
        "attributes": {},
        "validateOn": "change",
        "validate": {
            "required": false,
            "custom": "",
            "customPrivate": false,
            "strictDateValidation": false,
            "multiple": false,
            "unique": false
        },
        "conditional": {
            "show": null,
            "when": null,
            "eq": ""
        },
        "overlay": {
            "style": "",
            "left": "",
            "top": "",
            "width": "",
            "height": ""
        },
        "allowCalculateOverride": false,
        "encrypted": false,
        "showCharCount": false,
        "showWordCount": false,
        "properties": {},
        "allowMultipleMasks": false,
        "clearOnRefresh": false,
        "limit": 100,
        "valueProperty": "",
        "lazyLoad": true,
        "filter": "",
        "searchEnabled": true,
        "searchField": "",
        "minSearch": 0,
        "readOnlyValue": false,
        "authenticate": false,
        "selectFields": "",
        "searchThreshold": 0.3,
        "uniqueOptions": false,
        "fuseOptions": {
            "include": "score",
            "threshold": 0.3
        },
        "customOptions": {},
        "id": "e0u8b5c"
    }, {
        "label": "Desired Delivery Date",
        "tableView": false,
        "enableMinDateInput": false,
        "datePicker": {
            "disableFunction": "data.customer ? date > moment().add(data.customer.minimumLeadTimeDays, 'days'): false;",
            "disableWeekends": false,
            "disableWeekdays": false,
            "showWeeks": true,
            "startingDay": 0,
            "initDate": "",
            "minMode": "day",
            "maxMode": "year",
            "yearRows": 4,
            "yearColumns": 5,
            "minDate": null,
            "maxDate": null
        },
        "enableMaxDateInput": false,
        "key": "dateTime",
        "type": "datetime",
        "input": true,
        "widget": {
            "type": "calendar",
            "displayInTimezone": "viewer",
            "language": "en",
            "useLocaleSettings": false,
            "allowInput": true,
            "mode": "single",
            "enableTime": true,
            "noCalendar": false,
            "format": "yyyy-MM-dd hh:mm a",
            "hourIncrement": 1,
            "minuteIncrement": 1,
            "time_24hr": false,
            "readOnly": false,
            "minDate": null,
            "disableWeekends": false,
            "disableWeekdays": false,
            "disableFunction": "data.customer ? date > moment().add(data.customer.minimumLeadTimeDays, 'days'): false;",
            "maxDate": null
        },
        "placeholder": "",
        "prefix": "",
        "customClass": "",
        "suffix": "",
        "multiple": false,
        "defaultValue": "",
        "protected": false,
        "unique": false,
        "persistent": true,
        "hidden": false,
        "clearOnHide": true,
        "refreshOn": "",
        "redrawOn": "",
        "modalEdit": false,
        "labelPosition": "top",
        "description": "",
        "errorLabel": "",
        "tooltip": "",
        "hideLabel": false,
        "tabindex": "",
        "disabled": false,
        "autofocus": false,
        "dbIndex": false,
        "customDefaultValue": "",
        "calculateValue": "",
        "calculateServer": false,
        "attributes": {},
        "validateOn": "change",
        "validate": {
            "required": false,
            "custom": "",
            "customPrivate": false,
            "strictDateValidation": false,
            "multiple": false,
            "unique": false
        },
        "conditional": {
            "show": null,
            "when": null,
            "eq": ""
        },
        "overlay": {
            "style": "",
            "left": "",
            "top": "",
            "width": "",
            "height": ""
        },
        "allowCalculateOverride": false,
        "encrypted": false,
        "showCharCount": false,
        "showWordCount": false,
        "properties": {},
        "allowMultipleMasks": false,
        "format": "yyyy-MM-dd hh:mm a",
        "useLocaleSettings": false,
        "allowInput": true,
        "enableDate": true,
        "enableTime": true,
        "defaultDate": "",
        "displayInTimezone": "viewer",
        "timezone": "",
        "datepickerMode": "day",
        "timePicker": {
            "hourStep": 1,
            "minuteStep": 1,
            "showMeridian": true,
            "readonlyInput": false,
            "mousewheel": true,
            "arrowkeys": true
        },
        "customOptions": {},
        "id": "eine49h"
    }, {
        "type": "button",
        "label": "Submit",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "placeholder": "",
        "prefix": "",
        "customClass": "",
        "suffix": "",
        "multiple": false,
        "defaultValue": null,
        "protected": false,
        "unique": false,
        "persistent": false,
        "hidden": false,
        "clearOnHide": true,
        "refreshOn": "",
        "redrawOn": "",
        "modalEdit": false,
        "labelPosition": "top",
        "description": "",
        "errorLabel": "",
        "tooltip": "",
        "hideLabel": false,
        "tabindex": "",
        "disabled": false,
        "autofocus": false,
        "dbIndex": false,
        "customDefaultValue": "",
        "calculateValue": "",
        "calculateServer": false,
        "widget": {
            "type": "input"
        },
        "attributes": {},
        "validateOn": "change",
        "validate": {
            "required": false,
            "custom": "",
            "customPrivate": false,
            "strictDateValidation": false,
            "multiple": false,
            "unique": false
        },
        "conditional": {
            "show": null,
            "when": null,
            "eq": ""
        },
        "overlay": {
            "style": "",
            "left": "",
            "top": "",
            "width": "",
            "height": ""
        },
        "allowCalculateOverride": false,
        "encrypted": false,
        "showCharCount": false,
        "showWordCount": false,
        "properties": {},
        "allowMultipleMasks": false,
        "size": "md",
        "leftIcon": "",
        "rightIcon": "",
        "block": false,
        "action": "submit",
        "theme": "primary",
        "dataGridLabel": true,
        "id": "e17zthv"
    }],
    "revisions": "",
    "_vid": 0,
    "title": "Test for data in date fields",
    "display": "form",
    "access": [{
        "roles": ["5f2aa696accdbc36fd9b41ed", "5f2aa696accdbc65de9b41ee", "5f2aa696accdbc65f19b41ef"],
        "type": "read_all"
    }],
    "submissionAccess": [],
    "controller": "",
    "properties": {},
    "settings": {},
    "name": "dataInDateFields",
    "path": "datefields",
    "project": "5f2aa696accdbc98c59b41ec",
    "created": "2020-08-07T12:31:18.501Z",
    "modified": "2020-08-07T12:36:16.705Z",
    "machineName": "eixfevfdchjtmuo:dataInDateFields"
}
wag110894 commented 4 years ago

Hello @strets123 the code is located here: https://github.com/formio/formio.js/blob/master/src/widgets/CalendarWidget.js#L207

I hope that this helps. Thank you for taking a look.

Please let us know if you have any further questions.

Have a great weekend.

ps-ohanel commented 3 years ago

I think this issue is still there, isn't it? The data object containing the form data is not available in the disableFunction. It is usually the case for other custom functions (like validators, default values, etc.), where the whole submission data object of the form is accessible.

If I am not mistaken, the initial date argument is extended in this function But the form data submission object is not exposed there and therefore I did not find a way how to access the data object.

bfoese commented 2 years ago

I can confirm. But as a workaround you can access data within disableFunction via instance?.componentInstance?.data, e.g.

"disableFunction": "console.log('data from disableFn', instance?.componentInstance?.data); false"

VikkiAlenn commented 9 months ago

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!