将图例添加到jQuery datepicker [英] Add legend to jQuery datepicker

问题描述

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

I am using a standard jQuery Datepicker and I need to modify it to display legend on the bottom. When I use beforeShow event, I cant append legend html to datepicker because there is no #ui-datepicker-div element, and datepicker does not supply afterShow event. This is my code:

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

Have anyone some alternative? Tnx

推荐答案

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

At the time the onBeforeShow event is raised, the element #ui-datepicker-div does not exists yet.

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

A workaround is to use a setTimeout with a small duration (like 150ms) to append your legend to that element in the event handler. It could not be totally reliable although because of the architecture of the plugin, I don't know any other way.

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

Note: the documentation lists to a create event but the Datepicker does implement the Widget Factory so there is actually no create event raised !

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

演示

DEMO

这篇关于将图例添加到jQuery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！