Highcharts rangeSelector: is there a formatter function callback for the inputData fields?

Question

I'm using Highcharts and need to chart data with quarterly frequency using a format like 'yyyy Q#'.

I found how to format the periods in the tooltip (using a JS formatter function) and would now like to use the same format in the rangeSelector 'From' and 'To' input fields.

From the documentation I see I could use 'inputDataFormat', but that has the standard PHP strftime formatter function, which does not cover my requirement.

Any idea appreciated!

Massimo

Answer 1

It is possible to extend Highcharts format. You need to define Highcharts.dateFormats object:

  Highcharts.dateFormats = {
    Q: function(timestamp) {
         var date = new Date(timestamp),
             y = date.getFullYear(),
             m = date.getMonth();

       return y + '.Q' + (Math.floor(m / 3) + 1);
    }
 };

And then you can use 'Q' to format timestamp.

rangeSelector: {
  inputEnabled: true,
  inputDateFormat: '%Q'
},

example: http://jsfiddle.net/twcu0djj/