jQuery datepicker con Highstocks / Highcharts

¿Cómo puedo get un marcador de date jQuery que funcione con selector de range Highcharts?

Este violín es un viejo ejemplo (de un autor de Highcharts) que tiene el problema.

http://jsfiddle.net/BWEm5/

Cambiar la date de finalización restablecerá la date de inicio al comienzo de los datos.

$(function() { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { // Create the chart window.chart = new Highcharts.StockChart({ chart: { renderTo: 'container' }, rangeSelector: { selected: 1, inputDateFormat: '%Y-%m-%d' }, title: { text: 'AAPL Stock Price' }, series: [{ name: 'AAPL', data: data, tooltip: { valueDecimals: 2 }}] }, function(chart) { // apply the date pickers setTimeout(function() { $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker() }, 0) }); }); // Set the datepicker's date format $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', onSelect: function(dateText) { this.onchange(); this.onblur(); } }); }); 

Puede establecer extremos una vez que se haya seleccionado una date, utilizando su evento onSelect y eliminando this.onchange ().

 $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', onSelect: function(dateText) { chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime()); //this.onchange(); this.onblur(); } }); 

Ejemplo:

http://jsfiddle.net/BWEm5/542/

quizás esto ayudará

Cambiar el range en Highstock dinámicamente

Puedo actualizar la configuration de la tabla mostrada sobre la marcha al acceder a los objects del eje.