jQuery UI Datepicker – 如何更改Datepicker HTML

我需要对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('
foo
'); 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("
something
"); } 

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(/(.+?)<\/span>/g, '$1'); return html; }; })(); 

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

Answer 4

它可以像这样简单地完成（这适用于新的datepicker）：

 $('.datepicker').datepicker('show'); $(".ui-datepicker").append(
Foo
); $(document).on('click', '.ui-datepicker-next', function () { $(".ui-datepicker").append(
Foo
); }) $(document).on('click', '.ui-datepicker-prev', function () { $(".ui-datepicker").append(
Foo
); })