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

Marleen Renders wrote:

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

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:

Hi, 


You can set the the format at "DateFormat" properties in DataPick widget.

if need more help, just say!


Cheers



Marleen Renders wrote:

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:

Hi, 


You can set the the format at "DateFormat" properties in DataPick widget.

if need more help, just say!


Cheers



Hi,


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!


Cheers


Hi Thiago,

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.

Marleen Renders wrote:

Hi Thiago,

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.

Hi,


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.

Solution

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;
}
Solution

Ruben, thanks so much, that fixed it!

Ruben Silva wrote:

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;
}


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.

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