How to revise Javascript for Date

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



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() 

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?

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')[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);
 var qid=this.questionId;
 }
  
 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();};

   
});

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'},[
    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[1] +'-'+date[2]+'-'+date[0];
  })
});
</script>

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