HTML Date picker

I couldn’t find this question asked or a similar solution anywhere, my apologies if it is covered elsewhere.

I wanted to make a date picker but wanted to avoid third party dependencies like what is needed with flatpickr.  HTML5 has a native calendar input type, let’s try to use that!  I got it working, but have to manually define the QID variable rather than building it as a string like is shown in many of the flatpickr examples here.

So I have this code in my question’s HTML:

<input id="datepicker" type="date" />

Then I have this in the Questions’ javascript:

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery(document).ready(function(){
  jQuery("#datepicker").change(function(){
    var selectedDate = jQuery(this).val();
    jQuery("#QID3 .InputText").val(selectedDate);
  });
});
});

It works great!  But, look at the last line of data there-- I am manually defining the QID string rather than building it on the fly.  That is because the whole thing is nested so the ‘this’ keyword is not looking at the right thing.  Does that make sense?  I can’t use 

jQuery(#+this.questionId+" .InputText")

making it harder to scale and reproduce for future surveys.

What are your thoughts on this?  You can see a preview of the question here: https://astate.yul1.qualtrics.com/jfe/preview/previewId/8055390c-efac-4ef6-9d39-73e77b994e5c/SV_0Izy3aRj7FoqYHI?Q_CHL=preview&Q_SurveyVersionID=current