Highstock日期输入jquery ui datepicker位置变化 [英] Highstock date input jquery ui datepicker position changes

问题描述

在Highstock中，您可以使用jquery ui datepicker代替将日期字段输入到日期字段中，如本演示中所示... http://jsfiddle.net/hcharge/aNde9/

  datepicker 
 
 code> 

单击输入一次，打开日期选择器，它应该位于输入字段的下方，但是如果关闭它并再次打开它，然后粘在容器的顶部。

这是一个已知问题吗？

解决方案

datepicker通过小部件样式的'top'属性控制垂直位置 - 出于某种原因，在随后的日期选择器激活中'top'始终设置为0。
$ b

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

  $。getJSON（' http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=？'，函数（数据）{
 //创建图表
窗口.chart = new Highcharts.StockChart（{
 chart：{
 renderTo：'container'
}，
 
 rangeSelector：{
 selected：1， 
 inputDateFormat：'％Y-％m-％d'，
 inputEditDateFormat：'％Y-％m-％d'
}，
 
 title： 
 text：'AAPL股价'
}，
 
系列：[{
名称：'AAPL'，
数据：数据，
 tooltip：{
 valueDecimals：2 
} 
}] 
 
}，函数（图表）{
 
 //应用日期采购员
 setTimeout（功能on（）{
 $（'input.highcharts-range-selector'，$（'＃'+ chart.options.chart.renderTo））
 .datepicker（{
 beforeShow：function （i，obj）{
 $ widget = obj.dpDiv; 
窗口$ 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

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?

解决方案

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

这篇关于Highstock日期输入jquery ui datepicker位置变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！