How do you add buttons to a jQuery datepicker in the button panel?

Question

Do I just append the element to the panel wrapper and call .button()?

Answer 1

If you want to keep the "clear" button while scrolling through the months, use onChangeMonthYear:.

An example:

$( "#datepicker" ).datepicker({     showButtonPanel: true,     beforeShow: function( input ) {         setTimeout(function() {             var buttonPane = $( input )                 .datepicker( "widget" )                 .find( ".ui-datepicker-buttonpane" );              $( "<button>", {                 text: "Clear",                 click: function() {                 //Code to clear your date field (text box, read only field etc.) I had to remove the line below and add custom code here                     $.datepicker._clearDate( input );                 }             }).appendTo( buttonPane ).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");         }, 1 );     },     onChangeMonthYear: function( year, month, instance ) {         setTimeout(function() {             var buttonPane = $( instance )                 .datepicker( "widget" )                 .find( ".ui-datepicker-buttonpane" );              $( "<button>", {                 text: "Clear",                 click: function() {                 //Code to clear your date field (text box, read only field etc.) I had to remove the line below and add custom code here                     $.datepicker._clearDate( instance.input );                 }             }).appendTo( buttonPane ).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");         }, 1 );     } });