How can I change the color of the hover on the Datepiker calendar?
In addition, how can I change the color of the initial view where no date/time is selected yet?
Hi Ono Miyuki,
The Date Picker color is rely on the primary color of your application and there's couple way to change it.
1. Change the primary color of your application
Which you can change it in your application detail screen and press the edit button.
2. Change the primary color of your application using theme editor
click on the css style editor from the top bar of your service studio, then select Theme Editor from top right corner of the popup window. Then change the primary color.
3. Overriding the css style of the datepicker
In the css editor, you can find all the css style related to the datepicker from the OutSystemsUI style starting from line 7960.
Just copy the style you wanted and change the color by replacing with the color you like.
For example:
at line 8190
Hope this help.
Hi Kay Lun
Thanks for your information, advice.
Your advive was very clear.
I wanted to try the third method, but I could not find the corresponding description because the version of OutSystemsUI was too old.
Try to search for datepicker keyword in the OutSystemsUI style.
Below screenshot is from 2.8.3, hope this could help :)
The one which you are referring is the browser native Date picker control which is very limited for customization. For more flexibility it's suggested to use OutSystemsUI Date Picker widget.
Refer to below links to know the possible native Date picker customizations:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
https://stackoverflow.com/a/16106788
https://dev.to/codeclown/styling-a-native-date-input-into-a-custom-no-library-datepicker-2in
Kind regards,
Benjith Sam
Hi Benjith SamThanks for your advice.
I tried to use the Date Picker you suggested, but it didn't work, probably because the version of OutSystemsUI is 2.8.3 or earlier.
I could not put the Input widget in the Datepiker, and set the DatePicked to SelectedDateTime.
I can change the CSS for the Datepiker, but how can I change the CSS for the Input calendar?
The version of the OutSystemsUI cannot be changed on my end, so I would like to know how the current version can handle this.
DatePicker↓
Input↓
I have checked the link and tried a few things, but it is not working yet at this time.
However, I have found some helpful information and will continue to learn more.
Thank you very much for your help.