title: Making a programmatically created jQuery UI datepicker work with CSS scope
body: <p>This addresses a limitation of jQuery UI that has <strong>not</strong> been fixed as of version 1.10.3.</p>
  
  <p>jQuery UI has a <a href="http://jqueryui.com/themeroller/" rel="nofollow">themeroller</a> function that allows you to style your jQuery UI widgets, but sometimes you need to have multiple themes on the one page, so the themeroller allows you to specify a CSS "scope" when you create the widgets. This is simply a custom CSS class name that is used in the themerolled CSS to disambiguate the theme's CSS. Here is an example of a CSS rule that is generated by themeroller:</p>
  
  <pre><code>.myCustomClass .ui-buttonset { margin-right: 7px; }
  </code></pre>
  
  <p>where <strong>myCustomClass</strong> is the "scope" that was given when generating the themed widgets. The idea is that you can then specify which part of the page is to have your custom theme by assigning the class to the form, div or whatever container in which your widgets are rendered:</p>
  
  <pre><code>&lt;div class="myCustomClass"&gt;
  ...your custom themed widgets go here...
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that some widgets, notably the <strong>datepicker</strong> create another <strong>div</strong> that is appended to the document body. It looks something like this:</p>
  
  <pre><code>&lt;div id="ui-datepicker-div"
       class="ui-datepicker ui-widget ui-..."
       style="position: absolute; ..."
  &gt;...&lt;/div&gt;
  </code></pre>
  
  <p>Normally you can't see this div as it is hidden by assigning the style <strong>display: none</strong> but it is there all the time once a datepicker has been created. It is shared by all datepickers on the page. When a datepicker needs to show a "picker" this is the div that gets displayed.</p>
  
  <p>But this picker div is not inside the form, div or whatever contains your widgets, so it loses all of its styling because it's not inside a container where class="myCustomClass". This is pretty obvious when the picker is displayed.</p>
  
  <p>A common workaround is to run this once the document is ready:</p>
  
  <pre><code>$("#ui-datepicker-div").wrap('&lt;div class="myCustomClass" /&gt;');
  </code></pre>
  
  <p>But this will only work if a datepicker has already been instantiated on the page. But I have to create my widgets on-the-fly, so what can I do to make the datepicker work in this case?</p>