Help with Javascript code: Calendar

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.

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')[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");
  
 //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(yrs[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();};
});

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?

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: [
    new monthSelectPlugin({
shorthand: true,
    dateFormat: "m/Y",
    altFormat: "F Y",
    theme: "material_blue"
    })
 ]
    });

Hi there,

I need to update the calendar field to start displaying years from 2023 onwards, instead of showing earlier years.

JavaScript is beyond my capabilities - could someone please assist me with this?

Many thanks in advance!