Javascript Highstock日期输入jquery ui日期选择器位置更改

在Highstock中，您可以使用jQueryUIDatePicker，而不是在日期字段中输入文本，如本演示中所示

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

---

这是一个已知问题吗？

您需要设置相同的输入格式，或将datepicker

dateFormat

中的设置更改为与Highstock中相同的输入格式，或者在Highstock中更改

inputRangeFormat

。

日期选择器通过小部件样式的“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)
    });
});

---

这里有一个

我已经用匹配的格式更新了小提琴，但似乎没有什么区别，这是一个非常奇怪的错误。您在格式

'%Y-&m-%d'

中有错误，而应该是

'%Y-%m-%d'

。看：我意识到了这个错误并纠正了它，但它仍然不能像预期的那样工作，你明白我在说什么吗？日期选择器粘在容器的顶部…刚刚意识到，我没有回答你的问题，对不起！是的，现在我可以看出datepicker的位置是错误的。是的，我想我们会尝试这样做，很遗憾它不能开箱即用，非常感谢。但是当使用多个图形和多个数据采集器时，这个解决方案失败了。它总是在同一个图形中显示数据采集器，而不是在您单击以显示日期的图形中。请参见演示：

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