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

这是link to jsFiddle

Answer 2

您需要设置相同的输入格式，因此或将 datepicker 中的 dateFormat 更改为与 Highstock 中的相同，或将 Highstock 中的 inputRangeFormat 更改为。