Join the Team Forms community

R
A
T
C
G

Custom Value no longer works on Date Fields

Last updated 2 months ago
D
Daniel Kendall

E.g.
Form only with date field and default moment()

Populates successfully, but gives the error that it is invalid.

{ "title": "Blank", "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" color=\"#9f6b53\" stroke=\"#9f6b53\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"transparent\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2\"></path><path d=\"M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z\"></path><path d=\"M9 14h.01\"></path><path d=\"M9 17h.01\"></path><path d=\"M12 16l1 1l3 -3\"></path>\n</svg>", "schema": { "display": "form", "components": [ { "label": "Date / Time", "labelPosition": "top", "displayInTimezone": "viewer", "useLocaleSettings": false, "allowInput": true, "format": "yyyy-MM-dd hh:mm a", "placeholder": "", "description": "", "tooltip": "", "customClass": "", "customClassAdvanced": "", "tabindex": "", "hidden": false, "hiddenInPdf": false, "hideLabel": false, "autofocus": false, "disabled": false, "tableView": false, "modalEdit": false, "shortcutButtons": [], "enableDate": true, "datePicker": { "disable": "", "disableFunction": "", "disableWeekends": false, "disableWeekdays": false, "minDate": null, "maxDate": null, "showWeeks": true, "startingDay": 0, "initDate": "", "minMode": "day", "maxMode": "year", "yearRows": 4, "yearColumns": 5 }, "enableTime": true, "timePicker": { "showMeridian": true, "hourStep": 1, "minuteStep": 1, "readonlyInput": false, "mousewheel": true, "arrowkeys": true }, "multiple": false, "defaultValue": "", "defaultDate": "", "customOptions": {}, "redrawOn": "", "clearOnHide": true, "customDefaultValue": "", "calculateValue": "value = moment()", "allowCalculateOverride": false, "validateOn": "change", "validate": { "required": false, "customMessage": "", "custom": "", "customPrivate": false, "strictDateValidation": false, "multiple": false, "unique": false }, "enableMinDateInput": false, "enableMaxDateInput": false, "errorLabel": "", "errors": "", "key": "dateTime", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "" }, "customConditional": "", "logic": [], "onChange": "", "attributes": {}, "creatorPermissions": "", "permissions": [ { "user": {}, "permissionLevel": "" } ], "type": "datetime", "timezone": "", "input": true, "prefix": "", "suffix": "", "protected": false, "unique": false, "persistent": true, "refreshOn": "", "dataGridLabel": false, "dbIndex": false, "calculateServer": false, "widget": { "type": "calendar", "displayInTimezone": "viewer", "locale": "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, "minDate": null, "disabledDates": "", "disableWeekends": false, "disableWeekdays": false, "disableFunction": "", "maxDate": null }, "overlay": { "style": "", "left": "", "top": "", "width": "", "height": "" }, "encrypted": false, "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "addons": [], "datepickerMode": "day", "skipRemoveConfirm": true }, { "type": "button", "label": "Submit", "key": "submit", "size": "md", "block": false, "action": "submit", "disableOnInvalid": false, "theme": "primary", "input": true, "placeholder": "", "prefix": "", "customClass": "", "suffix": "", "multiple": false, "defaultValue": null, "protected": false, "unique": false, "persistent": false, "hidden": false, "clearOnHide": true, "refreshOn": "", "redrawOn": "", "tableView": false, "modalEdit": false, "dataGridLabel": true, "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, "addons": [], "leftIcon": "", "rightIcon": "", "skipRemoveConfirm": true } ] } }

A
Anthony Phan
Marked as solution

Hi Daniel 👋

The moment() function actually returns a moment object (not a string representing the date). Unfortunately, a few months ago, there was an update to Team Forms which dropped support for setting the value of a date/time directly in JavaScript as a moment object (e.g. value = moment()). Instead, you should set the value using an ISO string format. The code below should work.

value = moment().toISOString()

You can still use a moment object in the default value, however everything in JavaScript will need to use an ISO string instead on the moment object.

View full solution
A
D
1 comment·2 replies
A
Anthony Phan

Hi Daniel 👋

The moment() function actually returns a moment object (not a string representing the date). Unfortunately, a few months ago, there was an update to Team Forms which dropped support for setting the value of a date/time directly in JavaScript as a moment object (e.g. value = moment()). Instead, you should set the value using an ISO string format. The code below should work.

value = moment().toISOString()

You can still use a moment object in the default value, however everything in JavaScript will need to use an ISO string instead on the moment object.

D
Daniel Kendall

Thank you Anthony that worked perfectly.

In the future is there a plan for a way I can be alerted to future breaking changes?

A
Anthony Phan

Team Forms generally trys to always be backwards compatible (with this as a rare case). However, going forwards any major or breaking changes will be announced in the news section of this community site.

As a related note, once browsers/JavaScript standard start supporting the Temporal functions this will likely be the recommended/supported method for handling dates within Team Forms.