Can we change date in text format to datepicker in Gantt Chart from highcharts?

Question

I have a requirement where I need to show date-picker in Gantt chart.

Instead of highlighted text I want date-picker

I know if I click on the date text in the chart I can see date-picker but my for requirement want to see date-picker only instead of date text in blue color.

Please let me know if that is possible to implement.

I have tried all the properties from documentation But I am not getting result I want

Answer 1

You can't set it using the API but it is possible to get to it, but you need a little more knowledge of the library itself.

First, you need to override the function responsible for hiding inputs:

Highcharts.RangeSelector.prototype.hideInput = Highcharts.noop;

and then in the callback function chart.events.render() call the rangeSelecotr object the showInput() method to enable their visibility. In addition, you can hide the text below them and move them slightly apart:

chart: {
  events: {
    render() {
      const rg = this.rangeSelector;

      rg.showInput('min');
      rg.showInput('max');
      rg.inputGroup.css({ opacity: 0 });
      rg.minInput.style.left = `${rg.minInput.style.left.match(/\d+/)[0] - 10}px`;
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/3ohwusm8/
API: https://api.highcharts.com/highcharts/chart.events.render

React demo: https://codesandbox.io/s/highcharts-react-forked-lvgs24?file=/index.js