738
Views
10
Comments
Solved
OutSystems UI Datepicker in React

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

Rank: #5232
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;
}
Rank: #334

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




Rank: #5232

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.

Rank: #5232

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

Rank: #5232
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;
}
Rank: #10200

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

Rank: #475

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: