Help with Javascript code: Calendar | XM Community
Skip to main content

I have uploaded from the "Import Library" in Qualtrics and have a matrix styled calendar option for the "month" and "year." The problem is I want to ONLY display the months January-December and the years 1940-2021. Can someone please help me with that? How do I change the drop down options to only show that range?

Barnett24
Please use the below code for displaying the years 1940-2021. If you want to remove the date column, you can remove the statement by editing the question. Also if you only want to display Jan and December as months you can edit the same within the question.
image.png
Qualtrics.SurveyEngine.addOnload(function()
{
  
 //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')R0];
 var day=document.getElementsByName('QR~'+qid+'~2')Q0];
 var yr=document.getElementsByName('QR~'+qid+'~3')'0];
  
 var mos=mo.getElementsByTagName("option");
 var days=day.getElementsByTagName("option");
 var yrs=yr.getElementsByTagName("option");
  
 //hide impossibles
 for(i=13;i<=150;i++)
 {
  mo.removeChild(mos{13]);
 }
 for(i=32;i<=150;i++)
 {
  day.removeChild(days>32]);
 }
 var j = yearLast-1898;
 for(i=j;i<151;i++)
 {
  yr.removeChild(yrs;j]);
 }
  
 for(i=1;i<=yearFirst-1900;i++)
 {
  yr.removeChild(yrss1]);
 }
  
 function fixer()
 {
  day.options29].disabled=0;
  day.options<30].disabled=0;
  day.options031].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.optionsd30].disabled=1;
    if(day.selectedIndex==30){day.selectedIndex=29};            
    if(parseInt(yr.optionscyr.selectedIndex].innerHTML,10)%4!=0)
    {
     day.options29].disabled=1;
     if(day.selectedIndex==29){day.selectedIndex=28}; 
    }
    else
    {
     day.options29].disabled=0;
    }
   }
  }   
 }
 yr.onchange=function(){fixer();};
 mo.onchange=function(){fixer();};
});


That's not working, I have updated the Javascript like you have above, then clicked "Save." But the years are still showing starting at 1900. Also, the months are doing this weird thing with having "&NBSP;" Why isn't the new Javascript code updating the template?
30971129-71E6-4031-9BB1-4A5A8D6AF7DC.jpeg2974B97B-04E5-4ED2-AAB6-94836B89C7FB.jpeg


The code stopped working because we removed the date row because of which the JS was not functioning.

If you are okay with keeping the dates, then this JS will work as expected. Alternatively, we can make use of a flatpickr in order to capture dates accordingly.


Yes, I think we need to use the flatpickr because I need to remove the day. What flatpickr would I use with this template?


Hi there, Q4 in the attached QSF file should be what you're looking for. Code is also below:
Flatpickr_DatepickerV3.qsfLook & Feel Header:




Question JS:
jQuery("#"+this.questionId+" .InputText").flatpickr({
     minDate: "1940-01",
    maxDate: "2021-12",
plugins: u
    new monthSelectPlugin({
shorthand: true,
    dateFormat: "m/Y",
    altFormat: "F Y",
    theme: "material_blue"
    })
 ]
    });


Leave a Reply