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>

See Also

In this article
Not finding the help you need? Improve this article