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