Calendar/Date Picker

Goldie

I'd like a respondent to pick their birthday from a calendar/date picker and then calculate and store their age with the response. Is this possible?

AlexB

Sure is! Easiest way is to change question type, using Qualtrics library at the bottom. Choose Qualtrics Library - Survey Library - Demographics - Calendar & Date Questions. Choose the second question in the list: "Enter a date:", and import. Even though it looks like a text entry question from the design screen, there is code in there so when you preview and take the survey, it shows up as a calendar!

AnthonyR

To use a date to calculate age, you will likely need to feed it through a webservice and store age as an embedded data variable.

MohammedAli_Rajapkar

Yes you can... Under validation type please select "content validation" and then under "content type" please select "date". There is a drop down which allows you to select the date format.

Below is the snapshot.

Rich_Boits_Walker

@rachel_stoddart , There is a really good thread here about the calendar/date picker in the Qualtrics library.

https://qualtrics.com/community/discussion/101/calendar-date-picker

Goldie

@AlexB Sweet! That got me the right question itself. Do you know if I can use that question to calculate and store a person's age as well?

AlexB

@Goldie I don't know how to do that! But, I'm guessing you might have some insight on that

Goldie

@AnthonyR said:
To use a date to calculate age, you will likely need to feed it through a webservice and store age as an embedded data variable.

That makes sense. Thanks!

Kerry

This is a really nice feature...but how can I change the date format from the US only mm-dd-yyyy to the unambiguous international format: yyyy-mm-dd?

AnthonyR

@Kerry

Update the html view of that question text to the following:

Enter a date:<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.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> 


<script>
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];
  })
});
</script>

Kerry

Awsome! Thanks

TomG

Ok, the yahoo date picker Qualtrics uses looks bad and is ancient. I think a better choice is to integrate flatpickr. It has a built-in option that will let you show the user m/d/y but will store the date as y-m-d. It has lots of other options too and is easy to configure.

I've used it with Qualtrics and it works great.

RTSullivan

You can calculate and save age using the script in this post which I found very informative : https://medium.com/@mc_bloomfield/javascript-and-qualtrics-getting-started-34f113cbeaaa

Also, I utilized this picker in my survey and really like it: amsul.ca/pickadate.js/date/
However, one thing I did differently was to user the Modernizr library to detect if the device was a mobile device and if so trigger the native date pickers on those devices. It works pretty slick.

rachel_stoddart

I am creating a survey, date of birth is one of the questions. Can I choose this to be answered as date only? Or can my only choice be text entry?

MattLavery

Good day, all! Looking for some clarification on this thread.

I want respondents to enter their age on the calendar, and save the value they select in YYYY-MM-DD format. I can get that much done with what @AnthonyR shared.

Unfortunately, the calendar defaults to today's date, so my respondents (who are all expected to be 18 or 19) would have to click the previous month button at least 216 times to get to the right date. It takes a really dedicated respondent to do that!!

I looked at the alternate date pickers that @TomG and @RTSullivan mentioned (I particularly like the idea of using Modernizr to use the phone's native date picker. Unfortunately, I am not nearly fluent enough in JavaScript or modern web design to even know where to start with those tools.

Can someone give me a block of code (similar to what @AnthonyR posted) to help me accomplish my goals?

Thank you all! I appreciate any help you can offer.

RTSullivan

Hey @MattLavery ,

This is what I did:

In my survey Look & Feel > Advanced > Header I have the following code:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i" rel="stylesheet" />
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>

<!-- JQuery CDN -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- Modernizr CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<!-- Pickadate - these had to be uploaded to our file library as a file. These can probably be placed on a company CDN if available-->

<!-- picker.js --> 
<script type="text/javascript" src="https://**your url to library**/ControlPanel/File.php?F=F_ezDJTCYypgGLofX"></script>

<!--  picker.date.js -->
<script type="text/javascript" src="https://**your url to library**/ControlPanel/File.php?F=F_822V50V3TeCQwg5"></script>

<!-- Stylesheets -->
<!-- Default Picker CSS:  default.css-->
<link href="https://**your url to library**/ControlPanel/File.php?F=F_2fODpTl4LRFFjox" rel="stylesheet" type="text/css" />

<!--Default Date CSS: default.date.css-->
<link href="https://**your url to library**/ControlPanel/File.php?F=F_82Phb7aJ5evdh3v" rel="stylesheet" type="text/css" />

I also replicated the CSS from the two CSS scripts and pasted them into the Look & Feel > Advanced > Add Custom CSS only because I was having issues getting it all to display correctly...

Now in the survey I used a Text Entry > Form field and inserted the following custom javascript which uses Modernizr to determine whether to use the native datepicker or pickadate.

See the attached file.

You will just need to use something like Chrome developer tools to determine the input name. If you need help with that let me know. You would replace this: QR~QID356~24~TEXT with whatever it is for your survey.

Emily

@RTSullivan No, this is not expected behavior and we are working on a long-term solution. However, in the interim, you can always share your code by attaching it as a file to your post.

RTSullivan

@Emily thanks! Forgot about the file upload function.

w.patrick.gale

@Goldie The problem with date pickers like flatpickr for selecting dates of birth as @MattLavery alluded to with the number of clicks involved to navigate back many years, not to mention the user needs to figure out how to use the controls on the calendar (which are usually not inituitive). I personally prefer to use the side by side control like so:

You can find this using the 'Import Questions From...' option in the survey builder and search on 'date' under the Qualtrics Library of questions. I wish the Qualtrics engineers would make it easier to search the question library without having to know the name of the survey it falls under, but I digress. This format allows for quick and intuitive date selection many years back with few clicks. You could then simply create an 'age' field after the date selection to calculate the age.

The javascript on the control looks like:

Qualtrics.SurveyEngine.addOnload(function()
    {
      //Set years you would like to have available 
      var yearFirst = 1900; //Min 1900
      var yearLast = 2049; //Max 2049
      //This all remains unchanged
      var qid=this.questionId;
      var mo=document.getElementsByName('QR~'+qid+'#1~1')[0];
      var day=document.getElementsByName('QR~'+qid+'#2~1')[0];
      var yr=document.getElementsByName('QR~'+qid+'#3~1')[0];
      var j = yearLast-1898;
      for(i=j;i<151;i++){
        yr.remove(j);
      }
      for(i=1;i<=yearFirst-1900;i++){
        yr.remove(1);
      }
      function fixer()
      {
        day.options[29].disabled=0;
        day.options[30].disabled=0;
        day.options[31].disabled=0; 
if(mo.selectedIndex==2||mo.selectedIndex==4||mo.selectedIndex==6||mo.selectedIndex==9||mo.selectedIndex==11)
        {
          day.options[31].disabled=1;
          if(day.selectedIndex==31){day.selectedIndex=30};
          if(mo.selectedIndex==2)
          {
            day.options[30].disabled=1;
            if(day.selectedIndex==30){day.selectedIndex=29};                      
            if(parseInt(yr.options[yr.selectedIndex].innerHTML,10)%4!=0)
            {
              day.options[29].disabled=1;
              if(day.selectedIndex==29){day.selectedIndex=28}; 
            }
            else
            {
              day.options[29].disabled=0;
            }      
          }
        }
      }                        
      yr.onchange=function(){fixer();};
      mo.onchange=function(){fixer();};
    });

MattLavery

Thanks, @RTSullivan !! I'm pretty sure that I follow what you're doing here. The proof will be in whether I can make it work! Let you know if I run into any problems.

RTSullivan

@MattLavery great! Willing to help any way I can.