Change Calendar icon of datepicker

[jsu]

Hi Team,,

How I can change the default calendar icon of DatePicker and use a custom icon image?

Looking forward to your help.

Thanks

[Deepa Loganathan]

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. 

Live sample: https://stackblitz.com/edit/2l7dtu-hfm5b9?file=index.ts  

1.       Using icons generated from Metro studio 

 

<style> 

    #wrapper { 

        max-width: 246px; 

        margin: 30px auto; 

        padding-top: 50px; 

    } 

    .e-metro-icon .e-input-group-icon.e-date-icon::before{ 

      content:'\e318' !important; 

    } 

</style> 

 

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. 

Metro studio: https://www.syncfusion.com/downloads/metrostudio  

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. 

Regards, 

Deepa L. 

[jsu]

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]

Hi Jsu,  

 

 

Thanks for the update.  

 

 

Yes, you can use custom image instead of Calendar icon in Datepicker as given in the below code. 

 

 

 

created:function(){  

        //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 

            this.element.parentElement.lastElementChild.classList.remove('e-date-icon') 

            this.element.parentElement.lastElementChild.append(imgElement); 

      } 

 

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.  

https://stackblitz.com/edit/blfwcs-wb4iqd?file=index.ts  

Regards,  

Deepa L.