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

Include Clear Button In DatePicker's Footer Template

Environment

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

Description

How can I add a clear button to the footer of a Kendo UI DatePicker?

Solution

The clear button can be appended to the Kendo UI DatePicker's footer during the Open event.

    function onOpen(e) {
        //Get the opened DatePicker's footer
        var footer = $(e.sender.dateView.popup)[0].element.find(".k-footer");

        //If the button doesn't exist, create it, and append it to the footer.
        if (footer.find(".k-button").length == 0) {
            var btn = $('<a/>');
            btn.addClass('k-button');
            btn.text('Clear');
            btn.on('click', function () {
                e.sender.value(null);
                e.sender.close();
            });

            footer.append(btn);
        }

    }

Example

    <input id="datepicker" />
    <input id="datepicker2" />

    <script>
      $("#datepicker").kendoDatePicker({
        open: onOpen,
      });

      $("#datepicker2").kendoDatePicker({
        open: onOpen,
      });

      function onOpen(e) {
        //Get the opened DatePicker's footer
        var footer = $(e.sender.dateView.popup)[0].element.find(".k-footer");

        //If the button doesn't exist, create it, and append it to the footer.
        if (footer.find(".k-button").length == 0) {
          var btn = $('<a/>');
          btn.addClass('k-button');
          btn.text('Clear');
          btn.on('click', function () {
            e.sender.value(null);
            e.sender.close();
          });

          footer.append(btn);
        }

      }
    </script>

See Also

In this article