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

将图例添加到jQuery datepicker

1 个答案: