setValue not working for Input Type: Date

App Building
1

I am using setValue() on a Text Input with the Input Type of Date and the value from the database (Postgres) is datetime. The new value does not display and the default placeholder text “mm/dd/yyyy” still shows . The grid displays the date correctly with the column type set to Date so I assume the source data is good.

If I change the Type to text it works as expected, but I get that ugly Postgres date format (I could fix that in JS of course) and the date picker is not enabled, I would like the date picker.

2

Hey @bradlymathews can you try using a Date and time picker component instead of the Text input component set to date type? Personally, I find that the UI of the Date and time picker component is nicer and the JS function datetimepicker.setValue("2/15/2021") seems to be working fine for me.

Also, some references from our docs:

image
image1534×504 64.7 KB

image
image2838×1366 213 KB

3

For the textinput type, I believe it needs a specifically formatted value to work as it doesn't attempt to parse the input with any arbitrary date format the same way the datetimepicker does.

Here's a method to try to get the formatting to match there, but in general the datetimepicker is a bit nicer as Alex T mentioned.

4

The Date/Time picker does display the date correctly. One major problem though is that when you hover over the component, the little x which is used for clearing the contents pops up over the icon you click to set the date. See screencap.

I tried @alex-w 's suggestion of changing the format and keeping the Text Input component and that worked like a charm, the little x does not show up. :smiley:

On a related note, is there a way to disable that little x on a (or preferable all) component?

DatePicker

5

I figured out one way to get rid of the clear form x’s on all text inputs. Don’t know if it is the best way or if their are any side effects yet.

Add this CSS to a text box:

<style>
  .ant-input-suffix  {  display:none !important }
</style>

See this post on how to add custom css to your app: How to write custom CSS in Retool!

1 Like