551
Views
8
Comments
Solved
How to achieve placeholder/prompt for an input widget of Date Datatype?
Question
Application Type
Mobile

while working on a mobile application, I need to show a placeholder/prompt in a input widget which has a data type of DATE.

Here I need native type of calendar  to open when I click on input  instead of customized one(while using date picker, we get a customized one).

I tried to toggle the datatype through the Onfocus and Onblur events, but I don't want  to click two times on the input widget.

Solution

Hi,

you can use this css -

 .DatePlace:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.1em;
    width: 100%;
  }
 .DatePlace:focus:before,
 .DatePlace:valid:before {
    content: "";
  }


after that add a condition on style class property of  date input widget like

If(DateVar=NullDate(),"DatePlace","form-control")


Hope this will help you.

Regards

Rahul

Hello Rahul,

It's working really fine. Thanks for your response.


Regards

Boobalan

Hi @Rahul Sahu ,

This works like a charm. 

Thanks   :)


Regards,

Aj

I'm new to OutSystems and want to use this solution but can't figure out where I can add the new css class code for DatePlace class. Please give steps on where to add the class code.

Docs say something about adding a local theme. Will I need to do that? If so, how?

 Thanks.


Figured it out. Need to click Style Sheet Editor on the Screen's toolbar and enter the classes in the Screen's page. Other pages are non editable. CSS worked like a charm!

Glad to help you. Welcome :-)

Cheers

Sorry for the late message here, thanks for the fix Rahul, is this not a bug with OutSystems since it should show it automatically if you give it a prompt? @Rahul Sahu 

prompt date time not working apk // HOW TO prompt date time // placeholder/prompt for an input widge


How to achieve placeholder/prompt for an input widget of time Datatype?



help!!!!!

WhatsApp Image 2023-11-21 at 09.25.54.jpeg
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.