Highstock date input jquery ui datepicker position changes

Question

In Highstock, you can use the jquery ui datepicker instead of inputting text into the date fields, as in this demo... http://jsfiddle.net/hcharge/aNde9/

datepicker

Clicking the input once, opens the datepicker where it should be below the input field, however if you close it and open it again it then sticks to the top of the container. Implemented in a webpage this would be the top of the browser window.

Is this a known issue?

Answer 1

The datepicker controls its vertical position through the 'top' attribute of the widget's style - for some reason the 'top' is always set to 0 in subsequent datepicker activations.

It is relatively easy to workaround though if we have the widget's data 'remember' the correct position and explicitly set that position in the subsequent calls. See the 'onClose' and 'beforeShow' functions defined within the datePicker options below:

$.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',
            inputEditDateFormat: '%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({
                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 a link to jsFiddle