How to wrap the datepicker in a new div?

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.

Solution 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.

Solution 2

$('#datepicker').wrap('<div class="datepickerBorder"/>');

Here #datepicker is the id of datepicker input field, you may have something else.

Check jQuery .wrap().

You don't need to do this within beforeShow(). Do it within DOM ready function.

To wrap each inner element of datepicker you should try

$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');