jQuery UI datepickerの showButtonPanel にボタンを追加する

jQuery UI datepickerの showButtonPanel にボタンを追加します。今回はクリアボタンを追加します。

ボタンを表示

showButtonPanel を trueにしてボタンを表示します

$("#datepicker2").datepicker({ showButtonPanel: true });

ボタンを追加

beforeShowイベントを使ってボタンを追加します。

$("#datepicker2").datepicker({  
    showButtonPanel: true,  
    beforeShow: function( input ) {  
        setTimeout(function() {  
            var buttonPane = $( input )  
                .datepicker( "widget" )  
                .find( ".ui-datepicker-buttonpane" );  
  
            var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');  
            btn
                .unbind("click")  
                .bind("click", function () {  
                    $.datepicker._clearDate( input );  
                 });  

            btn.appendTo( buttonPane );  
        }, 1 );  
    }  
});