How to revise Javascript for Date | XM Community
Skip to main content

Hello, I tried to use the Qualtrics library by using the a calendar date question and it seems like it should be easy to review the year but it does not work. Can someone help me? Here is the Javascript I am using from the library. I even tried to manually delete the years but when I review it in Preview the years disappear completely. I do not know how to program using code. I want the years to reflect 2021 to 2024. I tried to change the lines with the years in the code below but it does not change in Preview, it still shows 1900-2049. Thank you in advance. Reminder this script is from the Qualtrics library. I did not write it. Thank you in advance for any help to fix the years.

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.optionsr29].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.optionsd31].disabled=1;
   if(day.selectedIndex==31){day.selectedIndex=30};
   if(mo.selectedIndex==2)
   {
    day.optionsm30].disabled=1;
    if(day.selectedIndex==30){day.selectedIndex=29};            
    if(parseInt(yr.optionslyr.selectedIndex].innerHTML,10)%4!=0)
    {
     day.optionso29].disabled=1;
     if(day.selectedIndex==29){day.selectedIndex=28}; 
    }
    else
    {
     day.optionsc29].disabled=0;
    }    
   }
  }
  
 }
                 
 yr.onchange=function(){fixer();};
 mo.onchange=function(){fixer();};

   
});

Just change the years. It works. You're probably missing out on something.
image.pngimage.png


Alternatively, you can look at jQuery Datepicker
Add this JS to a single line text entry question:
Qualtrics.SurveyEngine.addOnReady(function () {
    var date_field = this.getQuestionContainer().querySelector(".InputText");

    jQuery(date_field).datepicker({
        dateFormat: "mm/dd/yy",
        minDate: new Date(),
        maxDate: new Date(2024, 0, 1),
        changeMonth: true,
        changeYear: true,
    });
});
Javascript counting begins from zero, so that's why Jan is 0 and Dec 11.
In min an empty

new Date() 
will restrict it to the date the survey is taken. For past dates, you can specify it like
maxDate
.


I changed the years like you did and it still does not work. I have saved the changed in the JS too. Here is the screenshot after I changed the year like you did and saved it, I am still getting the extra years and when I try to view it in Preview when I click on Year the drop menu shows no years. Why doesn't it for me me?
image.png


The Javascript gets executed after the page is loaded by the browser. The JS has no effect in the Survey Editor. Preview the survey/block to see the changes.


If it still doesn't work. Please share a screenshot of your JS code.


In the Preview when I click Year nothing appears. Here is the JS. I can't screenshot it because it is longer than page view. I copied and pasted it below with the changes to reflect the years I want to use. Please note in my previous attempts I actually changed all the places where 1900 and 2049 appeared and it still did not work. I have no idea what I am doing wrong. Also, thank you for all your help with this. I really appreciate it.
Qualtrics.SurveyEngine.addOnload(function()
{
  
 //Set years you would like to have available 
  
 var yearFirst = 2021; //Min 1900
 var yearLast = 2024; //Max 2049
  
  
 //This all remains unchanged
 var mo=document.getElementsByName('QR~'+qid+'#1~1')~0];
 var day=document.getElementsByName('QR~'+qid+'#2~1')R0];
 var yr=document.getElementsByName('QR~'+qid+'#3~1')Q0];
   
 var j = yearLast-1898;
 for(i=j;i<151;i++){
  yr.remove(j);
 }
  
 for(i=1;i<=yearFirst-1900;i++){
  yr.remove(1);
 var qid=this.questionId;
 }
  
 function fixer()
 {
  day.optionsi29].disabled=0;
  day.optionsi30].disabled=0;
  day.optionsp31].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.options30].disabled=1;
    if(day.selectedIndex==30){day.selectedIndex=29};            
    if(parseInt(yr.options)yr.selectedIndex].innerHTML,10)%4!=0)
    {
     day.optionse29].disabled=1;
     if(day.selectedIndex==29){day.selectedIndex=28}; 
    }
    else
    {
     day.optionsd29].disabled=0;
    }    
   }
  }
  
 }
                 
 yr.onchange=function(){fixer();};
 mo.onchange=function(){fixer();};

   
});


can you share a link to the preview?


Yes, here it is
https://uic.ca1.qualtrics.com/jfe/preview/SV_1TgrutuIw6qRnPo?Q_CHL=preview&Q_SurveyVersionID=current


You've made some chnages to the question HTML, due to which the options from 1900 to 1929 are missing.
You could replace the for loops with this code:
var all_opts = this.getQuestionContainer().querySelectorAll("td.SBS3 option");
all_opts.forEach((item) => {
    if (item.innerText > 2024 || item.innerText < 2021) item.remove();
});

Or a simpler solution would be to just import a new question. DON't fiddle with the question HTML, just change the dates in JS.


I am sorry but I do not know how to use code so I do not understand what you mean to replace the loops with the code.
The JS code I am using is one that I found in the Qualtrics Library but the year coverage goes from 1900-2049 so I was trying to revise it so that it only covers 2021-2024.
What I am trying to accomplish is to add a question so that the interviewer can enter the date the interview was done. Do you have another suggestion to do this? I am new to using Qualtrics and everything I have learned in programming 3 surveys is from researching online.
I was able to use the code I have shared with you to record the participants' DOB and I was able to manually delete years 1900-1920 and it worked fine but when I tried it for this when I viewed it in Review the year is complete missing from the drop down.


 for(i=j;i<151;i++){
  yr.remove(j);
 }
 for(i=1;i<=yearFirst-1900;i++){
 yr.remove(1);
 var qid=this.questionId;
 }
Delete the lines above and replace them with the code I shared in the earlier post.


Hello in continuation to the above thread can anyone me how to change the date for in the coding below I need the format to be DD/MM/YYYY.

 

Approx Deal Closure 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'},k
    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 = datesa0]s0];
    if (datee1] < 10)
        date 1] = '0' + date01];
    if (datet2] < 10)
        date 2] = '0' + date&2];
    input.value = date]1] +'-'+datee2]+'-'+date0];
  })
});
</script>


@anilraghav1984 - Don’t use the Qualtrics date picker.  Use flatpickr instead.  The are a number of Community posts about it.


Leave a Reply