javascript - Highstock date input jquery ui datepicker position changes -

javascript - Highstock date input jquery ui datepicker position changes -

in highstock, can utilize jquery ui datepicker instead of inputting text date fields, in demo... http://jsfiddle.net/hcharge/ande9/

datepicker

clicking input once, opens datepicker should below input field, if close , open 1 time again sticks top of container. implemented in webpage top of browser window.

is known issue?

the datepicker controls vertical position through 'top' attribute of widget's style - reason 'top' set 0 in subsequent datepicker activations.

it relatively easy workaround though if have widget's info 'remember' right position , explicitly set position in subsequent calls. see 'onclose' , 'beforeshow' functions defined within datepicker options below:

$.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { // create chart window.chart = new highcharts.stockchart({ chart : { renderto : 'container' }, rangeselector : { selected : 1, inputdateformat: '%y-%m-%d', inputeditdateformat: '%y-%m-%d' }, title : { text : 'aapl stock price' }, series : [{ name : 'aapl', info : data, tooltip: { valuedecimals: 2 } }] }, function(chart){ // apply date pickers settimeout(function(){ $('input.highcharts-range-selector', $('#'+chart.options.chart.renderto)) .datepicker({ beforeshow: function(i,obj) { $widget = obj.dpdiv; window.$uidatepickerdiv = $widget; if ($widget.data("top")) { settimeout(function() { $uidatepickerdiv.css( "top", $uidatepickerdiv.data("top") ); },50); } } ,onclose: function(i,obj) { $widget = obj.dpdiv; $widget.data("top", $widget.position().top); } }) },0) }); });

here's link jsfiddle

javascript jquery jquery-ui highcharts highstock