Highstock日期输入jquery ui datepicker位置变化

在 Highstock 中，您可以使用 jquery ui datepicker 而不是在日期字段中输入文本，如本演示所示...http://jsfiddle.net/hcharge/aNde9/ http://jsfiddle.net/hcharge/aNde9/

datepicker

单击输入一次，打开日期选择器，它应该位于输入字段下方，但是如果您关闭它并再次打开它，它就会粘在容器的顶部。在网页中实现时，这将位于浏览器窗口的顶部。

这是一个已知的问题？

日期选择器通过小部件样式的“top”属性控制其垂直位置 - 由于某种原因，“top”在后续日期选择器激活中始终设置为 0。

如果我们让小部件的数据“记住”正确的位置并在后续调用中显式设置该位置，那么解决方法相对容易。 请参阅下面的 datePicker 选项中定义的“onClose”和“beforeShow”函数：

$.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)
    });
});

这是一个链接到 jsFiddle http://jsfiddle.net/martyk/aNde9/12/