Question

I need to put my datepicker in a new div, that will be a (shadow-)border-div.

I’ve tried the following:

beforeShow: function (input) {
  $(input).datepicker("widget")
   .find(".ui-datepicker-header, ui-datepicker-calendar")
   .wrapAll("<div class='datepickerBorder'/>");
}

But it does not work.

Additionally I’ve tried to wrap the whole picker, but then the border-div has not the same position, size, etc.

Answer 1

The datepicker control is absolutely positioned. Wrapping it inside an element will not contain the datepicker inside that element — the wrapping element will just sit at the bottom of the page while the datepicker will render next to the control.

Solution 1: You can add the class to the datepicker widget itself:

$("#datepicker2").datepicker({
    beforeShow: function() {
        $(this).datepicker("widget").addClass("datepickerBorder");
    },
    onClose: function() {
        $(this).datepicker("widget").removeClass("datepickerBorder");
    }
});

demo

Solution 2: create an absolutely positioned + hidden wrapping div on DOM load and re-position + re-size the div behind the datepicker when it shows. There is a catch: you cannot check the widget’s offset (the co-ordinates at which it will render) inside the beforeShow function.