How to add the datepicker jQuery UI element to Highcharts in a Drupal site? I am creating a Highstock (Highcharts) page in a Drupal site and I cannot seem to add the datepicker element. I have successfully implemented it in a non-Drupal environment here:

https://jsfiddle.net/MrSnrub/g7u14p10/

...but when I try to migrate it to a Drupal module, it fails. As I understand it, both jQuery and jQuery UI are installed by default in Drupal, is there a specific version that I need to worry about?  When I load up Firebug, it does not give me an error about the datepicker, so it must be interpreting it correctly, but when I load the page and click on the textbox, no datepicker appears. I have jquery_update module installed, and I'm running Drupal 7.  Here is my relevant Highstock JavaScript code:

$('#div-highstock-container').highcharts('StockChart', {
  chart: {
    renderTo: 'div-highstock-container',
    events: {
      load: create_new_legend
    }
  },

  // ...

  series: seriesOptions     
}, 
function(chart) {
  // apply the date pickers
  setTimeout(function() {
    $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
  }, 0)
});


HTML:

&lt;div id="div-container"&gt;
  &lt;div id="div-highstock-container"&gt;&lt;/div&gt;
  &lt;div id="div-new-legend"&gt;&lt;/div&gt;
&lt;/div&gt;


PHP (in hook_page):

drupal_add_library('system', 'ui.datepicker');
drupal_add_js('
  jQuery(document).ready(
    function() {
      jQuery( ".highcharts-input-group" ).datepicker({
        autoSize: true
      });
    }
  );
', 'inline');


Do I need to call the datepicker() method in the PHP code or in the JavaScript code at the end of the highcharts() object creation function call, or both?

UPDATE: I changed the PHP code to the following, but the datepicker is still not showing:

drupal_add_js('
  (function ($) {
    Drupal.behaviors.addHighStockDatepicker = {
      attach: function(context, settings) {
        $( ".highcharts-range-selector" ).datepicker();
      }
    }
  })(jQuery);
', 'inline');


If I change the element from ".highcharts-range-selector" to "#div-highstock-container" the datepicker does appear in the main container (therefore, I know I am loading the jQuery library datepicker file successfully), so why does it not appear when I try to apply it to all elements with class "highcharts-range-selector"?
The datepicker was being displayed, it was just hidden by the Highchart. Adding z-index: 9999 !important; to the .ui-datepicker CSS solved it.