Question

我需要对jQuery UI Datepicker生成的Datepicker HTML进行一些简单的更改，例如：在日历表之后添加一些简短的文字。

我一直在尝试使用beforeShow事件来做这件事，但是虽然我可以使用它来访问当前的HTML，但是操作它不起作用：

beforeShow: function(input, inst) {
//#this works
alert($('#ui-datepicker-div').html());
//#this does nothing
$('#ui-datepicker-div').append('message');          
}

我认为这可能是因为Datepicker HTML元素稍后被添加到Dom中，因此需要live方法来更新HTML，但我不知道如何使用此函数回调来连接live方法。或者我完全可能以错误的方式接近这一点。

我真的很感激，如果有人可以帮我解决这个问题，因为我已经搜索并尝试过很多东西，但我似乎无法让这个工作。感谢。

Answer 1

您似乎需要等到.ui-datepicker-calendar表插入#ui-datepicker-div才能附加消息。你可以做一个计时器来检查：

$('#datepicker').datepicker({
    beforeShow: function(input, inst) {
        insertMessage();
    }
});

// listen to the Prev and Next buttons
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);

function insertMessage() {
    clearTimeout(insertMessage.timer);

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible'))
        $('#ui-datepicker-div').append('<div>foo</div>');
    else
        insertMessage.timer = setTimeout(insertMessage, 10);
}

~~查看实际操作：http://jsfiddle.net/william/M9Z7T/2/。~~

查看实际操作：http://jsfiddle.net/M9Z7T/126/。

Answer 2

   $('.datepicker').datepicker({ beforeShow: function () {
        setTimeout(appendsomething, 10);
    },
    onChangeMonthYear: function () {
        setTimeout(appendsomething, 10);
        }
    }
    );

var appendsomething = function () {
    $("#ui-datepicker-div").append("<div class='something'>something</div>");
}

Answer 3

我使用以下技巧来修补_generateHTML函数。以下示例使用正则表达式将一些jQuery-ui类替换为jQuery-mobile类。根据您的需要进行修改：

(function () {
    $.datepicker._generateHTML_old = $.datepicker._generateHTML;
    $.datepicker._generateHTML = function (inst) {
        var html = this._generateHTML_old(inst);
        html = html.replace(/<a class="(ui-datepicker-prev ui-corner-all)( ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext$2"');
        html = html.replace(/<a class="(ui-datepicker-next ui-corner-all)( ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext$2"');
        html = html.replace(/<span class="ui-icon ui-icon-circle-triangle-.">(.+?)<\/span>/g, '$1');
        return html;
    };
})();

编辑：使用正则表达式/字符串函数编辑HTML实际上是一个坏主意。考虑将HTML放在元素中，操纵并抓取生成的HTML。

Answer 4

它可以像这样简单地完成（这适用于新的日期选择器）：

$('.datepicker').datepicker('show');
$(".ui-datepicker").append(<div>Foo</div>);

$(document).on('click', '.ui-datepicker-next', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})

$(document).on('click', '.ui-datepicker-prev', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})

jQuery UI Datepicker - 如何更改Datepicker HTML

4 个答案: