Add Clear Button

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 k-select element.
2. Handle the click event of the span.
3. Use the value method to set value to null.

<style>
    .k-datetimepicker {
        width: 50%;
    }

    .k-datetimepicker .k-select {
        width: 5em;
    }

    .k-datetimepicker .k-picker-wrap {
        padding-right: 5em;
    }

    .k-link-clear {
        margin-left: .428em;
    }
</style>

<input id="dtp" />

<script>
    $(document).ready(function() {
        var dtp = $("#dtp").kendoDateTimePicker({
            dateInput: true
        }).data("kendoDateTimePicker");
        var clearButton = '<span class="k-link k-link-clear" aria-label="Clear the DateTimePicker"><span unselectable="on" class="k-icon k-i-close" aria-controls="dtp_timeview"></span></span>';

        dtp.wrapper.find(".k-select").append(clearButton);

        $(".k-link.k-link-clear").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>