Make Datepicker appear when clicking on field in Qualtics

I'm trying to combine two pieces of code. I like the Google data picker style and I like the code that makes it appear when you click on the specific question.

Below are the two pieces of code. I know it's something to do with the function hideFixFuntion but my lack of JavaScript knowledge is stopping me figuring it out. Please could someone help make the google datepicker code appear and disappear when you click on Question QID27?

Many thanks

Rodp

Google datepicker code

Qualtrics.SurveyEngine.addOnload(function()
{

    var qid = this.questionId;
  var calid = qid + '_cal';
  var y = QBuilder('div');
  $(y).setStyle({clear:'both'});
  var d = QBuilder('div',{className:'yui-skin-sam'},[
    QBuilder('div', {id:calid}),
    y
  ]);

  var c = this.questionContainer;
  c = $(c).down('.QuestionText');
  c.appendChild(d);
  var cal1 = new YAHOO.widget.Calendar(calid); 
  cal1.render(); 
  var input = $('QR~' + qid);
  $(input).setStyle({marginTop: '20px',width: '150px'});
  var p =$(input).up();
  var x = QBuilder('div');
  $(x).setStyle({clear:'both'});
  p.insert(x,{position:'before'});
    cal1.selectEvent.subscribe(function(e,dates){
    var date = dates[0][0];
    if (date[1] < 10)
        date[1] = '0' + date[1];
    if (date[2] < 10)
        date[2] = '0' + date[2];
    input.value = date[0] +'-'+date[1]+'-'+date[2];

/* var dt = [   //this code was thought to be needed to reverse the date format but no longer reqiured.  It's not quite working as it's not updating the field through the input.value method so something isn't quite right in the syntax
  date.getFullYear(),
  ('0' + (date.getMonth() + 1)).slice(-2),
  ('0' + date.getDate()).slice(-2)
].join('-');
    input.value = dt;   */

  })

});

For completion the above needs the following references in the Look and Feel header

<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script>

below is the cdn.jsdelivr.net date picker code with the ability to make it visible when you click on the date field, sourced from: Utilizing Date Range Picker for Qualtrics date selection. It's the addeventlisterner and the hidefixfuntion() coding that I need help with transplanting into the above code. Note: the date picker isn't bringing up valid dates in the date picker for some reason but I'm not worried about that as the Google one above works fine.

Qualtrics.SurveyEngine.addOnload(function()
{
    $('input[name="QR~QID27~TEXT"]').daterangepicker({
   singleDatePicker: true,
   autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

 var x = document.getElementById('QR~QID27');
 x.addEventListener('focusout', hideFixFunction);


 function hideFixFunction() {
  document.getElementById('QR~QID27').style.display = "inline-block";
 }
$('input[name="QR~QID27~TEXT"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY'));
   document.getElementById('QR~QID27').style.display = "inline-block";
  });
$('input[name="QR~QID27~TEXT"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
   document.getElementById('QR~QID27').style.display = "inline-block";
  });

});

For completion the above needs the following references in the Look and Feel header

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />