How to wrap the datepicker in a new div?

javascript, jquery, jquery-ui, jquery-ui-datepicker

Solution

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.

Problem

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.

Original source