javascript - How to enable dates that match with the data in rangeselector? -
i have added datepicker
highchart
follows.
$(function() { $.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { // create chart $('#container').highcharts('stockchart', { rangeselector : { selected : 1 }, title : { text : 'aapl stock price' }, series : [{ name : 'aapl', data : data, tooltip: { valuedecimals: 2 } }] }, function(chart){ // apply date pickers settimeout(function () { $('input.highcharts-range-selector', $(chart.container).parent()) .datepicker(); }, 0); }); }); // set datepicker's date format $.datepicker.setdefaults({ dateformat: 'yy-mm-dd', onselect: function(datetext) { this.onchange(); this.onblur(); } });
});
how can prevent users select dates out of data range? example, if oldest data have 25-12-2010
, in date selector dates before 25-12-2010
should disabled. appreciate help
you can set beforeshowday callback. should return true or false if date valid - in case can check if date within navigator range.
$.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]; },
example: http://jsfiddle.net/m11tbw1c/
Comments
Post a Comment