包装jQuery-ui内联日期选择器的日历表

Question

我使用jQuery-ui datepicker插件创建了一个inline calendar。 但容器比日历窄。所以我需要一个用户可以滚动日历的解决方案，而datepicker标题将保持不可滚动状态。所以我想用div包装表。但是“beforeshow”在这种情况下不起作用。

$('#calendar').datepicker({
    beforeShow: function() {
        $('.ui-datepicker-calendar').wrap('<div class="calendar-wrap"></div>');
    }
});

JSFIDDLE link

预期输出：

Answer 1

(function ($) {
    $.extend($.datepicker, {
        _generateHTML_original: $.datepicker._generateHTML,
        _generateHTML: function (inst) {
            var $html = $(this._generateHTML_original(inst));
            return $($html[0]).prop('outerHTML') +
                   $('<div class="calendar-wrap"></div>').html($html[1]).prop('outerHTML');
        }
    });
}(jQuery));