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).datepi         


        

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.