如何在jQueryUi的内联日期选择器上添加一个按钮

时间:2012-08-08 02:45:27

标签: jquery-ui jquery-ui-datepicker

函数beforeShow对内联datepicker不起作用。如何在面板上添加其他按钮?

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 );  
            } ,

感谢您的回答。

1 个答案:

答案 0 :(得分:2)

你可以在这里找到一个例子..我希望你的案例很有用

http://csharptechies.blogspot.ca/2010/12/adding-custom-buttons-to-jquery.html

你也可以做到....

你在datepicker声明中的

        jQuery("#to").datepicker({
              dateFormat: 'yy-mm-dd',
              inline: true,
              changeMonth: true,
              showButtonPanel: true,            
              numberOfMonths: 2,
              minDate: -20,

                          beforeShow: buttonClear,



/* Function button Clear */
  function buttonClear( input ) {
           setTimeout(function() {
             var buttonPane = jQuery( input )
                .datepicker( "widget" )
                .find( ".ui-datepicker-buttonpane" );

             jQuery( "<button>", {
                 text: "Clear",
                 class: "ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all",
                 click: function() {
                   jQuery.datepicker._clearDate( input );



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

此致