New to Kendo UI for jQuery? Download free 30-day trial

Remove the Header From the DatePicker Calendar

Environment

Product Version 2021.3.1207
Product DatePicker for Progress® Kendo UI®

Description

How can I remove the header of the Calendar within the DatePicker widget?

Solution

  1. Attach a handler to the open event of the DatePicker.
  2. Obtain a reference to the Calendar widget inside the event.
  3. Find the header element and remove it.
<input id="datepicker" />
<script>
    $("#datepicker").kendoDatePicker({
        depth: "year",
        start: "year",
        open: function (e) {
            let calendar = this.dateView.calendar;
            calendar.wrapper.find(".k-header").remove();
        }
    });
</script>
In this article