Show a date value in nice format, interaction disabled and dark font color

💬 App Building
1

I would like to show a date value from a database in a nice date format (eg. d MMM yyyy) and it shouldn't be editable and the font color should stay dark. I don't know how to achieve this.

  • I tried a text component, but then I only see the database format yyyy-mm-dd. I don't know how to alter the date format in a text component.
  • I tried a date component. There I can change the date format but it is an input field for users. I can disable the interaction but then the text will be grey instead of dark. I don't know how to change the disabled font color.
  • I tried key-value component. But with every editing in the database the new columns are added to the key-value component. That's not an acceptable solution.

Can someone help me with this?

2

Formatting dates in a text component is probably most easily achieved using the moment library included with Retool.

It provides a handy wrapper to manipulate and format dates. The list of formatting options is here.

So for your text component the value might be something like:
{{ moment().format('d MMM YYYY') }}
or {{ moment(mydate.value).format('d MMM YYYY') }}

2 Likes