Add Clear Button

Updated on Dec 10, 2025

Environment

Product Version	2018.2.516
Product	Progress® Kendo UI® Date and Time Pickers for jQuery

Description

How can I add a Clear button to the DateTimePicker?

Solution

1. Add span with a clear icon to the component wrapper element.
2. Handle the click event of the span.
3. Use the value method to set value to null.

    <style>
      .k-datetimepicker {
        width: 50%;
      }
      
      #icon {
        top: 0.4rem;
      }
    </style>

    <input id="dtp" />
    <script>
      $(document).ready(function() {
        var dtp = $("#dtp").kendoDateTimePicker({
          dateInput: true
        }).data("kendoDateTimePicker");


        var clearButton = `<span id="icon"></span>`;
        dtp.wrapper.append(clearButton);
        
        kendo.ui.icon($("#icon"), { icon: 'x' });

        $("#icon").on("click", function(e) {
          var dtp = $(e.target).closest(".k-datetimepicker").find("input[data-role='datetimepicker']").data("kendoDateTimePicker");
          var di = $(e.target).closest(".k-datetimepicker").find("input[data-role='datetimepicker']").data("kendoDateInput");

          dtp.value(null);
          dtp.trigger("change");

          di.value(null);
          di.trigger("change");
        });
      });
    </script>