I need to make a few simple changes to the Datepicker HTML generated by the jQuery UI Datepicker e.g. adding some brief text after the calendar table.
我需要对jQuery UI Datepicker生成的Datepicker HTML进行一些简单的更改,例如在日历表后面添加一些简短的文字。
I have been trying to do this using the beforeShow event, but while I can access the current HTML using this, manipulating it does not work:
我一直在尝试使用beforeShow事件来做这件事,但是虽然我可以使用它来访问当前的HTML,但是操作它不起作用:
beforeShow: function(input, inst) {
//#this works
alert($('#ui-datepicker-div').html());
//#this does nothing
$('#ui-datepicker-div').append('message');
}
I think this might be because the Datepicker HTML elements are added to the Dom later and therefore the live method is needed to update the HTML, but I do not know how to hook up the live method with this function callback. Or I could well be approaching this in the wrong way altogether.
我想这可能是因为Datepicker HTML元素稍后被添加到Dom中,因此需要live方法来更新HTML,但我不知道如何使用此函数回调来连接live方法。或者我完全可能以错误的方式接近这一点。
I would really appreciate if someone could help me out with this as I have searched and tried a lot of things but I can't seem to get this working. Thanks.
我真的很感激,如果有人可以帮我解决这个问题,因为我已经搜索并尝试了很多东西,但我似乎无法让这个工作。谢谢。
4 个解决方案
#1
11
It seems like you need to wait till the .ui-datepicker-calendar
table to be inserted into the #ui-datepicker-div
to append your message. You could do a timer to check for that:
看起来你需要等到.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);
}
See it in action:
http://jsfiddle.net/william/M9Z7T/2/.
看到它在行动:http://jsfiddle.net/william/M9Z7T/2/。
See it in action: http://jsfiddle.net/M9Z7T/126/.
看到它在行动:http://jsfiddle.net/M9Z7T/126/。
#2
5
$('.datepicker').datepicker({ beforeShow: function () {
setTimeout(appendsomething, 10);
},
onChangeMonthYear: function () {
setTimeout(appendsomething, 10);
}
}
);
var appendsomething = function () {
$("#ui-datepicker-div").append("<div class='something'>something</div>");
}
#3
4
I use the following trick to monkey-patch the _generateHTML
function. The following example replaces some jQuery-ui classes with jQuery-mobile classes using regular expressions. Modify according to your needs:
我使用以下技巧来修补_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;
};
})();
Edit: using regex/string functions to edit HTML is actually a bad idea. Consider placing the HTML inside an element, manipulate, and grab the resulting HTML.
编辑:使用正则表达式/字符串函数编辑HTML实际上是一个坏主意。考虑将HTML放在元素中,操纵并抓取生成的HTML。
#4
0
It can be done as simply as this (this works with the new datepicker):
它可以像这样简单地完成(这适用于新的datepicker):
$('.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>);
})
#1
11
It seems like you need to wait till the .ui-datepicker-calendar
table to be inserted into the #ui-datepicker-div
to append your message. You could do a timer to check for that:
看起来你需要等到.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);
}
See it in action:
http://jsfiddle.net/william/M9Z7T/2/.
看到它在行动:http://jsfiddle.net/william/M9Z7T/2/。
See it in action: http://jsfiddle.net/M9Z7T/126/.
看到它在行动:http://jsfiddle.net/M9Z7T/126/。
#2
5
$('.datepicker').datepicker({ beforeShow: function () {
setTimeout(appendsomething, 10);
},
onChangeMonthYear: function () {
setTimeout(appendsomething, 10);
}
}
);
var appendsomething = function () {
$("#ui-datepicker-div").append("<div class='something'>something</div>");
}
#3
4
I use the following trick to monkey-patch the _generateHTML
function. The following example replaces some jQuery-ui classes with jQuery-mobile classes using regular expressions. Modify according to your needs:
我使用以下技巧来修补_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;
};
})();
Edit: using regex/string functions to edit HTML is actually a bad idea. Consider placing the HTML inside an element, manipulate, and grab the resulting HTML.
编辑:使用正则表达式/字符串函数编辑HTML实际上是一个坏主意。考虑将HTML放在元素中,操纵并抓取生成的HTML。
#4
0
It can be done as simply as this (this works with the new datepicker):
它可以像这样简单地完成(这适用于新的datepicker):
$('.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>);
})