Q:

initialize select2 dropdown on jquery datepicker

I have an application with all the drop down boxes customized by select2 plugin, obviously like this:
$("select").select2();

However, the select element on a jquery datepicker is not customized. And I couldn't figure out where to initialize this in the jquery datepicker function. The following is what I want to achive. I want a function that can replace init that can get the datepicker dom element.
$(".datepickerInput").datepicker({
  init : function(datepickerElement) {
     datepickerElement.find("select").select2();
  }
});

I appreciate your help. Thanks.

A:

The issue you are facing is that Datepicker doesn't have a "after show" callback function. That is, there is no available method/option that can run code after the datepicker has been showned.
There is some discussion and some possible answers in  jQuery Datepicker "After Update" Event or equivalent
So, for now, you can make that work by extending Datepicker, like this:
<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>

