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,
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
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?