jquery - 将图例添加到 jQuery 日期选择器

Question

我正在使用标准 jQuery Datepicker，我需要修改它以在底部显示图例。当我使用 beforeShow 事件时，我无法将图例 html 附加到 datepicker，因为没有 #ui-datepicker-div 元素，并且 datepicker 不提供 afterShow 事件。这是我的代码:

var html = $('#datepickerLegendHolder').html();

$('#start_date.datepicker').datepicker({
        "dateFormat": 'yy-mm-dd', 
        minDate: 0, 
        showOn: "both",
        buttonImage: "/images/calendar-icon.png",
        maxDate: "+2Y",
        beforeShow: function(event, ui) { 
            $('#ui-datepicker-div').append(html);
        },
        onSelect: function (dateValue, inst) {
            $('#end_date.datepicker').datepicker("option", "minDate", dateValue);
            displayButtons();
        }
    });

有人有其他选择吗？ TNx

Answer 1

引发 onBeforeShow 事件时，元素 #ui-datepicker-div 尚不存在。

解决方法是使用 setTimeout用较短的持续时间(例如 150 毫秒)将图例附加到事件处理程序中的该元素。尽管由于插件的架构，我不知道任何其他方法，但它不可能完全可靠。

注意:文档列出了 create事件，但 Datepicker 确实实现了 Widget Factory，因此实际上没有引发创建事件!

$('#datepicker').datepicker({
    ...
    beforeShow: function(event, ui) { 
        setTimeout(function() {
            $('#ui-datepicker-div').append('lalala');
        }, 150);
    }
});​

<强> DEMO