Question

我有一个带有select2插件定制的所有下拉框的应用程序，显然是这样的：

$("select").select2();

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

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

感谢您的帮助。感谢。

Answer 1

您遇到的问题是Datepicker在演出后没有＆＃34;＆＃34;回调函数。也就是说，没有可用的方法/选项可以在显示datepicker之后运行代码。

jQuery Datepicker "After Update" Event or equivalent

中有一些讨论和一些可能的答案

所以，现在，您可以通过扩展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>

Answer 2

在这里，我已经使用选择列表为DatePicker开发了自定义控件

My Fiddle Select2 With DatePicker

    <script async src="//jsfiddle.net/RaviMakwana/xz5wpf6s/embed/"></script>

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

2 个答案: