[Solved]-How to configure Highcharts tooltip.headerFormat with getDate() + 5-Highcharts

Is there any way I can use that function in my tooltip and generate second date in tooltip headerFormat[?]

From the specs:

headerFormat: string
The HTML of the tooltip header line. Variables are enclosed by curly brackets.[...]

As you can see tooltip.headerFormat only takes strings which are static in nature. Variables like {point.key} will be handled by search and replace mechanism. So you can not use a function for tooltip.headerFormat (what a pitty!).

If you want to use a formatter that can handle values dynamically, which means by a callback function you have to use tooltip.formatter:

formatter: Highcharts.TooltipFormatterCallbackFunction
Callback function to format the text of the tooltip from scratch.[...]

As you can see when you try tooltip.formatter for the first time it seems that you have to rewrite your tooltip code base. But that is probably because you haven't checked your prerequisite enough before starting to write. Also doing this in this answer would be just definitely too much...

The "+5 years"-portion:

var oDate = new Date( point.key );
return (5 + oDate.getFullYear()) + '/' + // add 5 years
       (1 + oDate.getMonth())    + '/' + // (January gives 0)
       oDate.getDate();

Note: The above is only true for regular years but not every year actually has 365 days
In case you want to also implement leap years in your calculation I recommend a framework like momentjs.com.

tooltip: {
    shared   : true,
    useHTML  : true,
    formatter: function() {
        var aYearFromNow = new Date(this.x);
        aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5);
        var tooltip = '<table><span style="font-size: 16px">'
                    + Highcharts.dateFormat('%e/%b/%Y', new Date(this.x)) + ' - '
                    + Highcharts.dateFormat('%e/%b/%Y', aYearFromNow)
                    + '</span><br/><tbody>';
        //loop each point in this.points
        $.each(this.points, function(i, point) {
            if (point.series.name === 'Observations') {

                tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color
                        + '">' + point.series.name + ': </th>'
                        + '<td style="font-size: 14px">' + point.y + '℃' + '</td></tr>';

            } else if (point.series.name === 'BOXPLOT') {

                const x = this.x;
                const currentData = this.series.data.find(data => data.x === x);
                const boxplotValues = currentData ? currentData.options : {};
                tooltip += `<span style="font-size: 14px; color: #aaeeee"> 
                        Max: ${boxplotValues.high.toFixed(2)}<br>
                            Q3: ${boxplotValues.q3.toFixed(2)}<br>
                            Median: ${boxplotValues.median.toFixed(2)}<br>
                            Q1: ${boxplotValues.q1.toFixed(2)}<br>
                            Low: ${boxplotValues.low.toFixed(2)}<br></span>`;

            } else {

                tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color
                        +  '">' + point.series.name + ': </th><td style="font-size: 14px">'
                        +  point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>'
                        +  '</tbody></table>';

            }
      });
      return tooltip;
    }
},