初始化jquery datepicker上的select2下拉列表

Question

我有一个应用程序,包含select2插件定制的所有下拉框,显然是这样的:

$("select").select2();

但是,jquery datepicker上的select元素不是自定义的.我无法弄清楚在jquery datepicker函数中初始化它的位置.以下是我想要实现的目标.我想要一个可以替换init的函数,它可以获取datepicker dom元素.

$(".datepickerInput").datepicker({
  init : function(datepickerElement) {
     datepickerElement.find("select").select2();
  }
});

我感谢您的帮助.谢谢.

Answer 1

您面临的问题是Datepicker没有"after show"回调函数.也就是说,没有可用的方法/选项可以在显示datepicker后运行代码.

在jQuery Datepicker"After Update"事件或同等事件中有一些讨论和一些可能的答案

所以,现在,您可以通过扩展Datepicker来实现这一目标,如下所示:

<p>Date: <input type="text" id="datepicker"></p>

<script>
$(document).ready(function() {

    // Code from the related question. Used the answer from @Markus
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
    $.datepicker._updateDatepicker_original(inst);
    var afterShow = this._get(inst, 'afterShow');
    if (afterShow)
        afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }

    // Now that we have `afterShow`, we can initialize Select2.
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        afterShow: function() {
            $(".ui-datepicker select").select2();
        }
    });
});
</script>