Calendar style issue
Question
Application Type
Reactive

Hi,

Is it possible to change this blue color. 

This is input widget, Data Type is Date Time 

And I can able to see Calendar ICON on Chrome and Edge but not in Firefox. Is any solution?


thanks

Hi NathanAstel,

Suggestion :Instead of normal input widget you can also use datepicker for displaying calendar where you get many functionality to display calendar in different manner.

Find the image below where I have used a datepicker and changed the color of selected date and also  you can modify the calendar as per your requirement ,you can pass event list, you can disable the dates etc.

Following are the css you need to write for changing the color of the selected date. And also pass the inputwidgetId to the datepicker.

.is-startrange .pika-button,
.is-selected .pika-button,
.is-endrange .pika-button {
    background-color: red;
} !important;

Regards,

Pavan Rajapurkar


mvp_badge
MVP

Hi Nathan,


You can use Chrome Developer Tools (right click the page and choose the option Inspect, or F12 shortcut) and select the HTML tab to inspect the elements and its classes:


After that, with simple CSS you can override the classes default styles and apply your styles, like on this example when I set the selected date to have the background set with the red color:


For the time, I cannot emulate the same behavior as you have (different version of OutSystems UI maybe), but using the rationale above, you can very easily change your style for this and other scenarios.


Kind Regards,
João

Hi, I tried to use DatePicker with Input widget but on page load it is showing. It should display on clicking on Calendar icon and it's value to be display in input widget


thanks

Hi Shaun,

 Have you assigned the Input widget name to the InputwidgetId property of the datepicker? 

When you assign the value then when you click on the Input widget you will able to see the calendar.

Regards,

Pavan R

Yes I have assigned it. But when I click inside Input widget it is not showing me Calendar.

Shaun,

I  think you set it's Data Type DateTime due to that you are not getting the DatePicker.



I hope you'll get the output

Hi Shaun,

 Is it possible to share the OML so that I can check and fix the issue. If not then create the same scenario in sample application and share that OML.

Regards,

Pavan R

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.