Join this month's Badge of the Month 💬 discussion about goals and resolutions to earn your exclusive badge! | Earn Badge >
Recently, we updated our Ranks to add Rankings for Qualtrics Partners. If you received a notification between January 23rd and January 24th regarding your XM Community Rank, please ignore it. We apologize for any confusion and inconvenience. Thank you for your patience and understanding.

Calendar/Date Picker

Goldie
Goldie Provo, UT CEP (Chief Executive Paw-ficer)

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?

Best Answers

  • AlexB
    AlexB Philadelphia Level 2 ●●
    Accepted Answer

    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
    AnthonyR Tucson Az Level 4 ●●●●
    Accepted Answer

    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
    MohammedAli_Rajapkar Mumbai - India QPN Level 5 ●●●●●
    Accepted Answer

    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
    Rich_Boits_Walker Indianapolis QPN Level 3 ●●●
    Accepted Answer

    @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

«1

Answers

  • Goldie
    Goldie Provo, UT CEP (Chief Executive Paw-ficer)

    @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
    AlexB Philadelphia Level 2 ●●

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

  • Goldie
    Goldie Provo, UT CEP (Chief Executive Paw-ficer)

    @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!

  • 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
    AnthonyR Tucson Az Level 4 ●●●●

    @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>
    
  • TomG
    TomG Raleigh, NC Level 8 ●●●●●●●●

    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
    RTSullivan New Orleans, LA Level 2 ●●

    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.

  • 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?

  • 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
    RTSullivan New Orleans, LA Level 2 ●●
    edited July 2018

    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
    Emily Seattle, WA Former XM Community Team Member

    @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
    RTSullivan New Orleans, LA Level 2 ●●

    @Emily thanks! Forgot about the file upload function.

  • w.patrick.gale
    w.patrick.gale Level 2 ●●

    @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();};
        });
    
  • 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
    RTSullivan New Orleans, LA Level 2 ●●

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