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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change Calendar icon of datepicker

Thread ID:





142236 Jan 23,2019 08:16 PM UTC Jan 25,2019 09:53 AM UTC ASP.NET MVC - EJ 2 3
Tags: DatePicker
Asked On January 23, 2019 08:16 PM UTC

Hi Team,,

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


Deepa Loganathan [Syncfusion]
Replied On 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. 

Replied On 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?

Deepa Loganathan [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon