Change the DatePicker Icon with Web Font Icon
Environment
Product Version | 2019.3.1016 |
Product | DatePicker for Progress® Kendo UI® |
Description
How can I use a Web Font Icon in place of the default icon in the Kendo UI DatePicker?
Solution
In order to replace the default icon, use the .removeClass() and the .addClass() method respectively as seen in the following snippet:
$(".k-icon").removeClass("k-i-calendar");
$(".k-icon").addClass('k-i-calendar-date');
Example
<input id="datePicker"/>
<script>
$(document).ready(function(){
$("#datePicker").kendoDatePicker();
$(".k-icon").removeClass("k-i-calendar");
$(".k-icon").addClass('k-i-calendar-date');
});
</script>