How to add the datepicker jQuery UI element to Highcharts in a Drupal site?

Question

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:

<div id="div-container">
  <div id="div-highstock-container"></div>
  <div id="div-new-legend"></div>
</div>

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"?

Answer 1

The datepicker was being displayed, it was just hidden by the Highchart. Adding z-index: 9999 !important; to the .ui-datepicker CSS solved it.

Answer 2

You need to wrap your JS code with Drupal behaviors, which can ensure your JS run after all required DOM elements in page are ready.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
      // Code to be run on page load, and
      // on ajax load added here
    }
  };
}(jQuery));

Also, you are not sure how to know if the jQuery is working. You can add console.log to output the jQuery object in console.

var obj = jQuery( ".highcharts-input-group" );
console.log(obj);