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
您需要设置相同的输入格式,或者将datepicker dateFormat
更改为与Highstock相同,或更改inputRangeFormat
中的inputRangeFormat。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.