Is there any way to have a calendar icon for a datepicker instead of a dropdown arrow?
Hi cperez1087,
Thank you for posting in the community.
I suggest that you take a look at the following article on the topic of styling and theming the igDatePicker:
https://www.igniteui.com/help
Regarding changing the dropdown button's image of the date picker, below is some sample code illustrating how a custom styling can be applied to the control's icon. In this case the images are removed and a background color is applied:
[code]
<style type="text/css"> .customTheme .ui-icon { background-image:none; background-color:Green; } .customTheme .ui-state-default .ui-icon { background-image: none; } </style>
[/code]
Please let me know if this helps.
That seems to work Petar.
I already had a javascript widget that extended the igDatePicker (to semi-handle blackout dates). So I just updated the css's object buttonImage property to [buttonImage + " ui-icon-calendar"] now I can target just that one.
Thank you very much.
Thank you for your reply. Feel free to contact me if any questions arise regarding this matter.
Hi I was able to change color using customTheme, but am yet now able to add a new calender image
<style>
.customTheme .ui-icon {
background-image: url("Images\cal.png");
background-color:Aqua;
}
.customTheme .ui-state-default .ui-icon {
background-image: none;
} </style>
Where am I going wrong?
Hi,
In fact, it seems that you have to override the .ui-igedit-buttonimage. ui-icon-triangle-1-s. ui-icon group of classes.
What i don't understand , is that why in the first place, the widget didn't come with a calendar icon instead of an arrow ? it doesn't make any sense to me. Could you please give a good reason for that ?
thank you