Question

参考示例here，而不是使用jQuery UI插件，我想使用另一个javascript插件，但我无法使其工作。我正在使用this，因为我可以立即导航年份和月份。

以下是我的选择：

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 }
            }

更新：附加选项

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

Answer 1

究竟什么不适合你？我刚刚添加了文件，它工作正常，请参阅：http://jsfiddle.net/tPd7K/

当然已删除：

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

由于此代码适用于jQuery UI datepicker。

Answer 2

我有基于@ Pawel的解决方案。对于那些感兴趣的人，这是jsFiddle。愿这可以帮到你

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

如何在Highstock rangeSelector中切换日期输入datepicker

2 个答案: