Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
254
Calendar Icon for DatePicker
posted

Is there any way to have a calendar icon for a datepicker instead of a dropdown arrow?

  • 49378
    Verified Answer
    posted

    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]

    Code Snippet
    1. <script type="text/javascript">
    2.     $('#datePicker').igDatePicker({
    3.         width: 160,
    4.         theme: 'customTheme'
    5.  
    6.     });
    7.  
    8. </script>
    9.  
    10. <input id="datePicker" type="text" />

    Please let me know if this helps.