title: Using a Javascript Date Selector in Qualtrics survey - carry date to the survey field
body: <p>I'm trying to input a date selector tool so that a survey respondent can input a date by clicking on the field, a calendar will pop up, they can select the date, and the date will be inputted to the Qualtrics question text box.</p>
  
  <p>Qualtrics has their own calendar tool available, but the issue is that the calendar is always visible. I only want the calendar to be visible when they either click the text box itself or a calendar icon (either would be fine). Here's the Qualtrics code:</p>
  
  <pre><code>    Enter a date:
  &lt;link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"&gt;&lt;/script&gt; &lt;script&gt;
  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] &lt; 10)
          date[1] = '0' + date[1];
      if (date[2] &lt; 10)
          date[2] = '0' + date[2];
      input.value = date[1] +'-'+date[2]+'-'+date[0];
    })
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the calendar tool that I'd like to use, but I can't figure out how to get the date to feed into the Qualtrics field text box. </p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;jQuery UI Datepicker - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $( function() {
      $( "#datepicker" ).datepicker();
    } );
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Date: &lt;input type="text" id="datepicker"&gt;&lt;/p&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>