Team Forms
Log in

Join the Team Forms community

Updated 7 months ago

Custom Value no longer works on Date Fields

Help
At a glance

The post describes an issue with a date/time field in a form, where using the moment() function to set the default value results in an invalid value. A community member responds that the issue is due to a recent update to Team Forms that dropped support for setting the date/time value directly as a moment object. Instead, the value should be set using an ISO string format, such as value = moment().toISOString(). The community member also notes that while moment objects can still be used for the default value, all JavaScript code will need to use ISO strings.

In response to a question about future breaking changes, another community member explains that Team Forms generally tries to maintain backwards compatibility, but any major or breaking changes will be announced in the news section of the community site. They also mention that once browsers/JavaScript start supporting the Temporal functions, that will likely become the recommended method for handling dates within Team Forms.

DDaniel 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 } ] } }

AAnthony 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
AAnthony 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.

DDaniel 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?

AAnthony 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.