Change the DatePicker Icon with Web Font Icon

Environment

Product Version	2019.3.1016
Product	Progress® Kendo UI® DatePicker for jQuery

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:

javascript

$(".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

• .removeClass()
• .addClass()