单击p：calendar next和prevous图标时如何调用JavaScript方法？

Question

我正在使用Primefaces开发一个项目。

我需要在p:calendar中清除所选日期，以便我可以在内部添加一个带有p：calendar组件的清除按钮，以便在点击该清除按钮时清除所选日期。

示例JavaScript代码：

   function addClearButton()
        {
            var r = $('<input/>').attr({
                type: "button",
                id: "field",
                class: "ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all",
                onclick: "clearDate()",
                value: 'clear'
            });
                $('#field').remove();
                $("#ui-datepicker-div").append(r); // ui-datepicker-div is a default id(See on firebug). 
             }

   function clearDate()
    {
        $('#calenderId_input').val(""); //calenderId_input is a default id(See on firebug).  
    }

Primefaces组件：

 <p:calendar  id="calenderId" showButtonPanel="true" onclick="addClearButton();"/>

在这里，我添加了我尝试过的示例代码。

通过使用上面的代码，我们可以添加按钮，但是当点击添加按钮的下一个或上一个按钮时，将自动删除。

所以，我需要在点击JavaScript下一个和上一个按钮（图标）时调用p:calendar方法添加按钮或建议我任何新想法。

请帮帮我。