We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Change Calendar icon of datepicker

Hi Team,,

How I can change the default calendar icon of DatePicker and use a custom icon image?
Looking forward to your help.


3 Replies

DL Deepa Loganathan Syncfusion Team January 24, 2019 08:34 AM UTC

Hi Jsu, 

Thanks for contacting Syncfusion support. 

You can override the Calendar icon of Datepicker with any custom icons. 

We have prepared a sample by replacing the default date icon of the EJ2 DatePicker with bootstrap glyphicon and custom generated icon using Metro Studio. Please find the sample in the link provided below and make use of this solution in your application. 

1.       Using icons generated from Metro studio 
    #wrapper { 
        max-width: 246px; 
        margin: 30px auto; 
        padding-top: 50px; 
    .e-metro-icon .e-input-group-icon.e-date-icon::before{ 
      content:'\e318' !important; 
Add this style in your application to replace the Calendar icon.  

Please, check out the link to know about the purpose and usage of Syncfusion Metro Studio. 

2.       For using third party icon packages. 
 created: function () { 
    datepicker.element.parentElement.lastElementChild.classList.remove("e-date-icon", "e-icons"); 
    datepicker.element.parentElement.lastElementChild.classList.add("fas", "fa-calendar"); 

Here, you need to remove the “e-icons” and “e-date-icon” classes from the Datepicker’s input element and replace it with the root class of the thirty-party icon package in the created event of Datepicker. 

Deepa L. 

JS jsu January 24, 2019 07:33 PM UTC

Hi Deepa,

Thanks for the response.
Actually, what I am trying to do is I have a calendar image with me and I need to replace the syncfusion datepicker calendar icon with my image.
Could you please help me on this?

DL Deepa Loganathan Syncfusion Team January 25, 2019 09:53 AM UTC

Hi Jsu,  
Thanks for the update.  
Yes, you can use custom image instead of Calendar icon in Datepicker as given in the below code. 
        //create image tag 
        var imgElement = document.createElement('img'); 
        ///set attribute 
            imgElement.setAttribute("src", "https://i.ibb.co/qDVhHhG/icon-Image.png"); 
            //align the image to fit in its container 
            imgElement.setAttribute("class", "customImage"); 
            //remove the font-icon class 

Here, we have created an image tag that is appended to the Datepicker’s input element in the created event of Datepicker.  

Please find the live sample for your reference.  

Deepa L. 

Live Chat Icon For mobile
Up arrow icon