How to change Datepicker icon?

0
Hello,   I would like to change the datepicker default icon with my own one. How can I do that?   Thanks for help
asked
4 answers
7

Hello Siman,

try with Advance date picker or Customizable Date Picker if that will help, else go with CSS changes.

answered
0

People with more experience in styling might be able to provide a better answer, but - using css or javascript, you should be able to remove this class or override it and then replace it with your own:

 

image.png

 

Alternatively, there are many custom datepickers available in the marketplace that you could use, but I assume you'd rather stick with the standard Mendix functionality.

answered
0

Hello Simon,

you can change the content of the icon by override the class like below.

for me, I used mIcons module to change the icon with different one,

.mx-icon-filled.mx-icon-calendar::before {
    content: "\e959";
}

 

answered
0

Hi Simon,

 

I've got a solution that may require a little less setup and customization. However, it's just as effective ;). 

 

These are the steps:

1. Go to your App Folder in the File Explorer

2. Find the Theme folder, then click on Web. Next find or create an 'img' folder. Place your calendar icon inside the img folder and call it 'calendar.svg' or something like that. 

3. Step back into Mendix and create a custom stylesheet or find an existing SCSS sheet

4. Now for the magic

Copy this bit of CSS:

.btn,.mx-button {
    .mx-icon-filled.mx-icon-calendar{
        &::before{
            color: transparent; // This will hide the icon font Mendix uses.
            display: inline-block; // Add this to make sure your height and width are rendered (text standard is inline and that doesn't render height or width)
            height: 1rem; // Set your height (i.e. in px, em, rem, vw, vh, etc.) - necessary since the bg image we're using doesn't render the size.
            width: 1rem; // Set your width (i.e. in px, em, rem, vw, vh, etc.) - necessary since the bg image we're using doesn't render the size.
            background: center / contain no-repeat url('img/calendar-filter.svg'); //This is the link to your new icon.
            filter: invert(13%) sepia(9%) saturate(24%) hue-rotate(338deg) brightness(99%) contrast(81%); // Use this to change the icon's color. Make sure your icon lines and or fills are black (#000000) to get the right results. Convert your HEX to Filter values here: https://codepen.io/sosuke/pen/Pjoqqp    
        }
    }
}

 

5. Enjoy your new calendar icon all across the app. You can repeat this trick on other icons as well! just make sure to change the CSS selector from .mx-icon-calendar to .mx-icon-{the name of the other one}. You can easily find the selector-name of your elements by using the Dev inspector in Chrome.

 

Btw, how cool is that filter trick for icon colors! I use it so much I add a bunch of $filter-color variables to every project right from the start.

 

Hope it helps!

 

 

 

answered