Timepicker value updating to empty object

The value of the timepicker input component updates to an empty object. The formattedString property does update, but is "Invalid date" on initial load.

As a result, I think the only way around this is to have some ternary like:
{{ typeof(timepicker1.value) === "string" ? timepicker1.value : timepicker1.formattedString }}

Hi @lj96!

I haven't been able to repro this on my end. If you return timepicker1.value in a JS query and run that JS query, do you see the value?
I think the text30 component may be blank because text components display strings, but don't display objects (like a date object).

The left panel (model browser, docs here) would also be super helpful here to see what the data actually looks like at a given time!

I realized that the value being stored is a Date object, but still having issues with the value being stored in the component.

In a JS query, I use timepicker1.setValue(new Date()), which correctly displays the current time in the component. However, value in the left panel for the corresponding component becomes:

And the typical Date methods (e.g. toIsoString(), toTimeString) are not available.

Ah! Would moment work for you? https://docs.retool.com/docs/javascript-in-retool#dates

How are you displaying that datetime in text1?

Using setValue(moment().format()) still results in the value store being a string.

If you have {{timepicker1.value.toTimeString()}} for text1, it won't display correctly because timepicker1.value is a string. However, when you select a new time (from the UI), the value is Date so {{timepicker1.value.toTimeString()}} will correctly show the time string.

Basically, there seems to be inconsistency in the values being stored from setValue and the UI itself.

Ah, my screenshot is actually a string, since moment().format() basically returns a string version of the date object! And text1.setValue() will only work if the input is a string.

Here's an example of using moment().format() to turn the timepicker value into a string:

Here's an example of using the timepicker's formattedString:

Is there a reason you'd like to use toTimeString() instead of a moment function in Retool?