Question

I’m trying to figure out, how can I add +1, +5… panel buttons to the JQuery UI datepicker. I don’t even know if it’s possible to add custom buttons to it.

Has anyone had a similar problem?

Is it even posible (without hardcoding) to add custom panel buttons?

Answer 1

Datepicker doesn’t have a callback that triggers on its creation. It would be nice if it had one. Binding to the input click event did the trick for me, but I think order of operations is going to matter here. Make sure you bind input click event after you bind the datepicker.

http://jsfiddle.net/7dV4R/

$(function() {
    $("#datepicker").datepicker({ });
});

$('#datepicker').click( function() {
    $five = $('<button>+5</button>');
    $five.click( function() { alert('add five'); });
    $ten = $('<button>+10</button>');
    $ten.click( function() { alert('add ten'); });
    $('#ui-datepicker-div').append($five).append($ten);
});