Qualtrics 'select date' question from library: how to display only month and yr & still limit years | XM Community
Solved

Qualtrics 'select date' question from library: how to display only month and yr & still limit years

  • 24 July 2020
  • 8 replies
  • 462 views
C

I've imported the second calendar and date question from the library (the one that collects month, day, year in column format)
In JS, I set the year to start at 1970 - test in preview and that works fine.
However, I only want to collect month and year (not day) but if I remove the 'day' column (by clicking remove column from the question) and then preview, I get all the years from 1900 ie it doesn't limit it to just 1970 onwards.
Can someone help please?

icon

Best answer by SurajK 24 July 2020, 17:13

View original

8 replies

SurajK
Rank
Userlevel 5
Badge +4

You can add the base logic for Day column to hide and comment out the 2 lines from JS,
image.png
 //var day=document.getElementsByName('QR~'+qid+'~2')[0];
 // var days=day.getElementsByTagName("option");

  

C

Display logic on one column.jpgThanks SurajK
I tried to add the display logic but I'm obviously not doing it correctly as it is being applied to the whole table not just the Day column.

How do I select ONLY the Day column??

C

Also, in the JS, I have commented out the first line but I can't see the second line in my JS. This is what I have now.
Qualtrics.SurveyEngine.addOnload(function()
{

 //Set years you would like to have available

 var yearFirst = 1970; //Min 1900
 var yearLast = 2020; //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();};


});

SurajK
Rank
Userlevel 5
Badge +4

Hi CP10 ,
Looks like you are using side by side question, so anyway you don't want the day column then you can simply create a side by side question and add the required answers for month column and required year answers for Year column. It will sort out everything.
But since you are using the Qualtrics date question, you can remove the day column from column option(Remove Column) and use the below JS code,
image.png
Qualtrics.SurveyEngine.addOnload(function()
{
  
  //Set years you would like to have available 
  
  var yearFirst = 1970; //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();};*/


    
});

C

Thanks for persevering with me SurajK ☺️
I have removed the column and pasted the JS that you kindly provided but I still have the same problem ie it shows the years from 1900, not from 1970.
As I understand it, your first suggestion is to not use the Qualtrics question and create my own but I'm not sure how to do that.
When you say "add the required answers for month column and required year answers for Year column", how do I do that? I tried using the 'drill down' question type and uploaded a CSV with months of the year in one column and years from 1970-2020 in the second column but that didn't work. What am I doing wrong?

SurajK
Rank
Userlevel 5
Badge +4

Ok, you don't have to create the drill down question, just the side by side and paste the answer list in year column.
For the default Qualtrics date question, try adding the display logic for Day column as false and keep the above JS code as is.
image.pngimage.png

C

Thanks SurajK I've now got the Qualtrics question working! Hooray!
I tried to set up the side-by-side question for month AND year (just so I would understand how it worked) but I couldn't make that happen. I don't understand where to paste the options of the 12 months and the 30 year range that could be selected.
Could you show me how that is set up please?

M

I am having the same issue using the default Qualtrics date question. I am able to hide the Day field using display logic as outlined above, but the date range changes I made in javascript are still not reflected when I preview the question. The original date range of 1900 to 2049 is still there.
Below is what I have in Javascript:
 //Set years you would like to have available 
 var yearFirst = 1940; //min is 1900
 var yearLast = 2021; //max is 2049
  
 //This remains unchanged
 var qid=this.questionId;
 var mo=document.getElementsByName('QR~'+qid+'~1')[0];
 //var day=document.getElementsByName('QR~'+qid+'~2')[0];
 var yr=document.getElementsByName('QR~'+qid+'~3')[0];
  
 var mos=mo.getElementsByTagName("option");
 //var days=day.getElementsByTagName("option");
 var yrs=yr.getElementsByTagName("option");

Leave a Reply


Terms & Conditions