TextBox for Dates does not display prompt value in mobile

TextBox for Dates does not display prompt value in mobile

  

Hello All,

I have an input box for start date and end date. I expect to see the following in my textbox in mobile but however, it show empty values in the textbox, may i know what wrong?



Thanks

Solution

Hi Jace Jace,

Basically, there's nothing wrong, that's just standard behaviour for input boxes with type "date" set. It's your browser doing this, not OutSystems (google for "html input date placeholder" (without the quotes) and you'll see).

However, there's a workaround/trick to get what you want (sort of):

  1. Add an Attribute to the input box with Property "required" and value "required": 
  2. Add the following CSS to your Theme or screen CSS:
    input[type="date"]:invalid::before {
        content: attr(placeholder) !important;
        color: #999;
    }

What this does is that the "required" attribute will make an empty input invalid, so the CSS selector kicks in, putting a content of the placeholder inside the box. It's a bit of a trick, but it works.

Solution