将图例添加到 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();
        }
    });

有其他选择吗？天呐

Answer 1

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

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

注意：文档列出了 create 事件，但 Datepicker 确实实现了小部件工厂，因此实际上没有引发创建事件！

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

DEMO