Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How do I work with datepicker in forms?

Issue

I am having trouble getting the formatted date from a datepicker widget that is inside a form widget in Appsmith. When accessing the date using FormName.data.DatePickerName, it returns the date in ISO format instead of the format I specified. I have to manually format it using moment, which is inconvenient. It would be better if the formatted date could be accessed directly from the form or if the FormName.data.DatePickerName returned the formatted date. I have created an issue for this on the Appsmith GitHub page.

Resolution

The issue is that when using a Datepicker widget inside a Form widget in Appsmith, accessing the date using FormName.data.DatePickerName returns the date in ISO format instead of the formatted date. To work around this, one can manually format the date using a library like Moment.js. Alternatively, one can access the formatted date directly using DatePickerName.formattedDate instead of using FormName.data.DatePickerName.

A bug report has been filed for this issue on the Appsmith Github page, and the Appsmith team is working on finding a solution. In the meantime, users can use the suggested workarounds to ensure that they get the formatted date from the Datepicker widget inside a Form widget. For example, to format the date using Moment.js, one can use the following code: {{moment(FormName.data.DatePickerName).format('LL')}}.