Hello there,
I'm trying to add an input widget with a date, with a DatePicker connected to it inside of a Reactive Web App.
The problem I'm running into is that the date field automatically opens a browser-created datepicker (in my screenshots you'll see the one by Chrome). This datepicker opens on top of the OutSystems datepicker.
I've tried changing the input field to 'text', but this makes the display of the date ugly, plus creates a warning in OutSystems
What's the best way to go about this?
Screenshots:
The OutSystems UI datepicker, linked to a 'date' input field (this opens a browser date picker on top of the OutSystems UI one):
A simple 'date' field without Outsystems UI Datepicker - ugly.
The OutSystems datepicker with linked input field as a text field
I used this styles on the theme to hide the default calendar, hope it helps you
/* Hides the default calendar */ input::-webkit-calendar-picker-indicator{ display: none; } input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
Ruben, thanks so much, that fixed it!
Ruben Silva wrote:
As it turns out, I'd also forgotten to add the assign to the client action "DatePickerOnSelect", which filled the variable with the correct date. After that was done, it worked well.
Marleen Renders wrote:
Hi,
You can set the the format at "DateFormat" properties in DataPick widget.
if need more help, just say!
Cheers
Hi Thiago,
Thanks, however that didn't fix it.When I set the input field input type to 'text', the variable for the input field to 'text', and dateformat to "dd-MM-yyyy", this is what I see:
When I try it with the input type on 'date', local variable on 'date' and the dateformat to "dd-MM-yyyy", I'm getting this:
I would very much appreciate more help :)
Thanks in advance!Marleen
Thiago Mari wrote:
Great to fixing the problem! Just put the any answer as "Soluctions" to "close" the discussion and the people know what is the soluctions please!
I wrote it didn't fix it and I would appreciate more help.
As you can see in the images, the result is not what I need.I would need the date to show as "dd-MM-yyyy", or "08-01-2020"
It should not look like "Fr-01-yyyy"
If you can help, that would be greatly appreciated.
Sorry the mistake, too much images and i have been a little bit "lost" hehe.
I use a variable with data type "Date" into input and in datepick i put the format i want. In my case, work fine.
One question, you use reactive web or traditional web?
@Thiago Mari: Thanks for your message. As I've mentioned in my first post and in the headline of this question, I'm using Reactive Web.
I was able to hide the default calendar by using the code supplied by Ruben Silva, which suppresses the default calendar in webkit browsers. Has anyone figured out how to suppress the default calendar that appears when using Microsoft Edge? (I'm using Version 44.17763.831.0).
Hi there!
I have a question about the outsystems UI datepicker. I'm now using the CSS to hide the default date picker. Only the OS UI datepicker is not setting showing the 24 hour time in the input field but the 12 hour: