CODEWITHSUNDEEP
javascriptjqueryjquery-uihighcharts
hcharge
hcharge

Reputation: 1246

Highstock date input jquery ui datepicker position changes

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?

Upvotes: 4

Views: 6259

Answers (2)

marty
marty

Reputation: 4015

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

Upvotes: 8

Paweł Fus
Paweł Fus

Reputation: 45079

You need to set the same input formats, so or change in datepicker dateFormat to the same as in Highstock , or change inputRangeFormat in Highstock.

Upvotes: 1

Related Questions