Question

我已将datepicker添加到highchart，如下所示。

$(function() {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 1
        },

        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.container).parent())
                .datepicker();
        }, 0);
    });
});


// Set the datepicker's date format
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText) {
        this.onchange();
        this.onblur();
    }
});

}）;

如何阻止用户选择超出数据范围的日期？例如，如果我拥有的最旧数据是25-12-2010，那么应该禁用25-12-2010之前的日期选择器日期。感谢任何帮助

Answer 1

请阅读：https://stackoverflow.com/a/16368722/3469614

但你需要： 1.从数据库或文件中获取开始日期 2.从数据库或文件中获取结束日期

Answer 2

您可以设置beforeShowDay回调。如果日期有效，您应该返回true或false - 在您的情况下，您可以检查日期是否在导航范围内。

  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
      var d = new Date(date).getTime();
      var {min, max} = chart.navigator.xAxis;

      return [min <= d && d <= max];
    },

示例：http://jsfiddle.net/m11tbw1c/

如何启用与rangeselector中的数据匹配的日期？

2 个答案: