How to toggle date input datepicker in Highstock rangeSelector

2
votes

Refer to example here, instead of using jQuery UI plugin, I would like to use another javascript plugin but I can't make it work. I am using this because i can navigate the year and month instantly.

Here is my options:

options = {
    chart: {
        zoomType: 'xy',
        width: 700                  
    },
    title: {
        text: null
    },
    xAxis: [{
        type: 'datetime',
        //ordinal: false
    }],
    yAxis: [{
        title: {
        text: null
        },
        opposite: true,
        id: '_rootAxis',
        endOnTick: false,
        startOnTick: false
    }],
    tooltip: {                  
        shared: true,
        crosshairs: [true, true],
        animation: false,
        shadow: true
    },
    scrollbar : {
        enabled : true
    },
    legend: {
        layout: 'vertical',
        align: 'right',                 
        borderWidth: 0,
        itemWidth: 115,
        enable: true,
        verticalAlign: 'middle',
        maxHeight: 250
    },              
    plotOptions: {
        spline: {
        lineWidth: 1,
        showCheckbox:true,
        marker: {
            enabled: false
        },
        events: {
            checkboxClick: this.showSeries
        }                       
        },
        column: {
        borderWidth: 0.01
        },
        series: {
        allowPointSelect: true,                     
        point: {
             events: {
            click: this.selSingleSeries
             }
        }
        }
    },
                rangeSelector:{
                    enabled:true,
                    inputDateFormat: '%d/%m/%Y',
                    inputEditDateFormat: '%d/%m/%Y',
                    inputEnabled: true
                },              
                series: [],
                exporting: {
                    dateFormat: '%d-%m-%Y'
                },
                credits: { enabled: false }
            }

Update: Appended Options

$('.doc').highcharts(options, function (chart){
    var series = chart.series,
        i;          
    for(i=0; i<series.length; i++) {
       if( (series[i].checkbox) && (series[i].checkbox.checked) ) {
        that.showSeries.call(series[i], {checked: true});
       }
    }
    setTimeout(function () {                                    
       $('input.highcharts-range-selector', $(chart.container).parent())
        .datepicker({
            format: "dd/mm/yyyy",    
            todayBtn: "linked",
            orientation: "auto left",
            autoclose: true,
            todayHighlight: true
        });
    }, 0);
});
2
highstock

2 Answers

0
votes

What exactly doesn't work for you? I have just added files, and it works fine, see: http://jsfiddle.net/tPd7K/

And of course removed:

$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText) {
        this.onchange();
        this.onblur();
    }
});

Since this code is for jQuery UI datepicker.

0
votes

I have the solution based on @Pawel's. Here is the jsFiddle for those interested. May this help you

    $('input.highcharts-range-selector', $(chart.container).parent())
        .datepicker({
            format: "dd/mm/yyyy",    
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true,
            orientation: "auto right"
        });         
    });