Highstock日期输入jquery ui datepicker位置更改

Question

在Highstock中,你可以使用jquery ui datepicker而不是在日期字段中输入文本,就像在这个演示中一样...... http://jsfiddle.net/hcharge/aNde9/

datepicker

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

这是一个已知的问题？

Answer 1

日期选择器通过窗口小部件样式的"顶部"属性控制其垂直位置 - 由于某种原因,在后续的日期选择器激活中,"顶部"始终设置为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的链接