Z-Index Issue : Datepicker window overridden by pie chart background

Question

I have a requirement to show data in pie chart, based on User input date range.

I have already achieved that, but my date selection window is overridden by the background of the pie chart.Is there any way to set z-index for me?

How can I fix this styling?

<p>Date Range:
        <input type="text" id="datepicker" onclick="phantom_back"> to
        <input type="text" id="datepicker2" onclick="phantom_back"> </p>

<div id="chartContainer" style="height: 370px; width: 100%;z-index: -1;background-color: #000000;" ></div>
<div id="keyMessageChartContainer" style="height: 370px; width: 100%;z-index: 102;"></div>

...........
var startDate;
    var endDate;
    var start;
    var end;

    function phantom_back(image)
            {
                document.getElementById('datepicker').style.height = 700;
                document.getElementById('datepicker').style.width = 700;
                document.getElementById('datepicker').style.zIndex = 50;
                document.getElementById('datepicker2').style.height = 700;
                document.getElementById('datepicker2').style.width = 700;
                document.getElementById('datepicker2').style.zIndex = 50;
                phantom_top();
            }

        function phantom_top()
            {
                document.getElementById('chartContainer').style.height = 600;
                document.getElementById('chartContainer').style.width = 600;
                document.getElementById('chartContainer').style.visibility = "visible";
            }
        $(function() {
            $("#datepicker").datepicker({
                onSelect: function() {
                    startDate = $(this).datepicker('getDate');
                    start = formatDate(startDate);
                    //getCurrentAccountId2(startDate);
                }

            });
            $("#datepicker2").datepicker({
                onSelect: function() {
                    endDate = $(this).datepicker('getDate');
                    end = formatDate(endDate);
                    alert('skn here s' + startDate);
                    alert('skn here e' + endDate);
                    getCurrentAccountId2(start, end);
                }

            });

        });
.....................

Answer 1

To expand on my comments, add an onfocus and an onblur listener to your inputs eg:

<input type="text" id="datepicker" onfocus="{!c.handleOnfocus}"> 

Define your handleOnfocus method similar to this:

handleOnfocus: function (component,event,helper){
  var el = event.target;
  if(el){
    el.style.visibility = "none"; 
  }
}

In your onblur handler, it would be similar, except you'd make the visibility property something like visible