Change DatePicker icon

[Anil]

I am trying to use kendo Jquery Date Picker.
I am referrring https://docs.telerik.com/kendo-ui/controls/editors/datepicker/overview.html for the same.

But instead of default k-i-calendar class I want to use k-i-calendar-date class. But I am not able to change.

Icons: https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
https://docs.telerik.com/kendo-ui/api/javascript/ui/button/configuration/iconclass in this example it talks about changing default icon class.

 

$("#button").kendoButton({ iconClass: "fa fa-male"});

 

I tried using the same for my date picker but it doesnot work.
kendo.jQuery("#ang_layout1_asof_sdate").kendoDatePicker({

  iconClass: "k-icon k-i-calendar-date"

});

[Hetali]

Hi Anil,

In order to replace the default icon, please use the .removeClass() and the .addClass() method respectively. For example:

$(".k-icon").removeClass("k-i-calendar");
$(".k-icon").addClass('k-i-calendar-date');

In this sample Dojo, the default icon is replaced by the k-i-calendar-date icon.

I hope this helps. Please let me know if you have any further questions pertaining to the changing of the icon in the Kendo UI DatePicker.

Regards,
Hetali
Progress Telerik

[Anil]

Thanks It works