Format Data in an Edit screen

[mdsmith1]

I have a situation where I am entering a date into a screen but when I edit the data, my date comes back as a long sting as a time stamp.

I would like it to display the only the first 10 characters.

I am showing the screen that I am dealing with.

Mike

[MiguelOrtiz]

Hey Mike,

So, two questions before I try to provide a response:

1- I see the "Form data key" field is empty in your textInput20 component. I'm assuming then that this field is being populated via the "Default value" options, right? Are you able to share what you have in that field?
2- Any particular reason you're using a textInput component and not a date component?

[bobthebear]

I assume you mean you are entering a date into the table in the background but when you edit the date in that popup and click OK the table updates with a datetimezone?

so your table shows like "2025-06-22" and when you open up that popup and change the date to "2025-07-23" then click OK the table value changes to "2025-7-23T00:00:00.000Z"

[bobthebear]

- this will fix any values that are auto set/default:

- if you're using a textbox, you can validate all dates (including leap days) and the YYYY-MM-DD format and optionally the YYYY-MM-DDT00:00:00.000Z format using regex:

^(?:(?:(?:(?:(?:[02468][048])|(?:[13579][26]))00)|(?:[0-9][0-9](?:(?:0[48])|(?:[2468][048])|(?:[13579][26]))))([-\/])02\\129)|(?:\d{4}([-\/])(?:(?:(?:0[13578]|1[02])\2(?:0[1-9]|[12]\d|3[01]))|(?:(?:0[469]|11)\2(?:0[1-9]|[12]\d|30))|(?:02\2(?:0[1-9]|1[0-9]|2[0-8]))))(?:T\d{2}:\d{2}:\d{2}\.\d{3}Z)?$

its a bit toooooooo long for me to wanna go over all of it right now so maybe toss it into GPT or Claude and ask it:

• "analyze then breakdown and explain in detail the following regex for validating dates including how it is accounting for leap days: <copy pasta the mess above here>"

- to fix dates entered manually we can use the Change Event Handler:

• we only want this to run when there's a valid datetime string ending in Z so the regex is:
  {{ self.value.match(/^(?!\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z).*$/i) == null }}
• to actually change the format to YYYY-MM-DD the JS is:
  textInput12.setValue(moment(textInput12.value).format("YYYY-MM-DD"))

Note:

• It actually can validate both "2024-02-22" and "2024/02/22" (depending on what's using it or which browser different styles might be more confirmative )
• Feel free to tag me if you need help with any of this

Update:

• fixed the validation regex.... I copied the wrong one

I forgot I wrote a function and used it in the default field so youd have an example:

[mdsmith1]

Bob:

I have taken a run at this as shown in the screens below.

I have also tried the format idea and that did not work either.

Some participants have been asking about the sequence of events.
I have one screen called "Add Patient" where the birthdate is entered in the format of "YYYY-MM-DD".
I have a second screen called "Edit Patient" that takes the current values in the table and puts them into localStorage. Then these values are put into the "Edit Patient" Screen. Most values are text and they come up perfectly. Its just the date value that comes up as a Time Stamp.

Mike

[mdsmith1]

Bob:

OK, the data is entered with an "Add Patient" Screen, as shown below.

After it shows up in the table as per the second Screen below.

Mike

[MargarettSanford]

Hi Mike, it sounds like the issue is that the date is returning in a full timestamp format when you edit the data. To fix this, you can simply format the date to only display the first 10 characters — typically this will give you just the date portion in the format YYYY-MM-DD.

[mdsmith1]

Margaret:

Thank you for your reply.

The table feature has excellent features for formatting but the modal form (see below) seems to have no formatting features for the textInput fields.

I am not an expert on the the modal form. If you are aware of formatting features on textInput fields, please let me know.

Mike

[Tess]

Hi @mdsmith1,

Did you sort this out already?

Out of curiosity, could you use the date input instead of the text input? The date component comes with formatting options:

[mdsmith1]

Hi Tess:

I have not heard from you for a long time. I take it they have moved you to another job.

Anyway, I tried your suggestion of changing the input to a date input field and renamed it back as it was before. I gave it the format code that you recommended but it still didn't work.

See the screens below.

The first screen shows my entry of the birthdate for the first record in the table.

When I click OK, you can see the date nicely formatted in the first row.

But when I click "Edit" I get a time stamp format, when I have asked for "yyyy-MM-dd".

This should work but it doesn't.

Mike

[bobthebear]

this is showing a Text Input (named textInput25), not a Date Input:

the top one is a Text Input, like what you have and the bottom one is a Date Input. The only thing I changed was the label, everything else is default value.

[mdsmith1]

Bob:

Even though it is called "TestInput25", it is a Date Input. I had to rename the DateInput field back to TextInput so the code could work with it.

If you look at the Form Data Key to the right, it gives date options that you don't get with a TextInput field.

Mike

[bobthebear]

I actually wasn't calling it a Text Input because of the name, it's the icon and the order of things in the window. Below I've circled the icon that tells you what type of component it is, but you'll also notice other things:

• Format falls right below Default Value and it isn't named Form data key
• First day is missing from Text Input
• Date Input has a default Prefix icon under Add-ons, Text Input doesn't

Date Input:

Text Input:

Your Component:

[mdsmith1]

Bob:
There is a difference in the Format Data Keys.

The first screen capture shows a TextInput Data Key.

The second screen capture shows a DataInput Data Key.

Mike

[bobthebear]

that does not say "Format Data Key" it says "Form Data Key". What you circled has absolutely nothing to do with the text format of anything. Hover over "Form Data Key" it will not mention Formatting anything. Both of your pictures have a Text Input Component selected, not a Date Input Component.

Yes I get you have different values in "Form Data Keys" but it is doing absolutely nothing. There is no such thing as a "TextInput Data Key" or a "DataInput Data Key" only "Form Data Key" because it has to do with auto populating the values of different input components when inside a Form Component but nothing to do with formating a string.

[mdsmith1]

Bob:

What is your suggestion about formatting the Date field?

Mike

[bobthebear]

use the Date Component as @Tess suggested. Just click and drag one onto your workspace anywhere, you will immediately see it is different than what you currently have

[mdsmith1]

Bob:

I am already using the Date Component as Tess suggested.

Mike

[bobthebear]

Please don't sound defeated , we'll get you there but you 100% are not using the Date Component. I've shown you how your own editor window says those are both Text Inputs, not Date Components but here look at the blue circles:

You may well at one point have put a Date Component there, but as of right now this T symbol you see to left your components name:

is Retool telling you the component you have selected is a Text Input.

This is the symbol for a Listbox Component:

This is the symbol for a Table Component:

Every component has a different symbol

This is the symbol for a Date Component

This symbol is not next to either of your component names, so neither of them can be a Date Component.

Maybe I'm just not understanding correctly. Why do you think those are Date Components when the Retool UI is informing you otherwise? Is there a reason you don't want to drag a new Date Component to your screen to check if there is a difference?

[mdsmith1]

Bob:

You are 100% right.

I was sure that I had added a Date Input component following Tess's instructions. But I must have added a different input component.

The date works perfectly now. I even have a calendar tool that works well even when adding dates 70 years ago.

I will mark your note as the solution.

Thanks again.

Mike

I can go from Edit to Table very smoothly now.

Thank you to both you and Tess for your help on this.

Mike