Clever Geek Handbook

JQuery datepicker add custom button

I am trying to add a custom button to a jQuery datepicker button bar. When I apply the following code even though nothing happens:

 $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        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 );  
        } ,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });

Any help would be greatly appreciated.

+3


source to share


2 answers 


$(function(){
    var pickerOpts = {
        showOn: "button"
    };  
    $("#date").datepicker(pickerOpts);
});


0


source


Related question: "How do I add buttons to a jQuery datepicker in a button bar?" answered in a different post. For an example of how the Previous Day and Next Day button was added to the button bar, see How to add buttons on the jQuery datepicker in the button bar?



+1


source






More articles:


All Articles