HTML Date picker | XM Community
Skip to main content

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

There are several issues with your setup, but those can be ignored if you just delete everything and use this JS on your text entry question:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery("#"+this.questionId+" .InputText").attr("type","date");
});

 

There are several issues with your setup, but those can be ignored if you just delete everything and use this JS on your text entry question:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery("#"+this.questionId+" .InputText").attr("type","date");
});

 

Sheesh.  I was sure going about it the hard way.  Thank you, this works great.  

Love this :) 

Love this @TomG !

Do I have any control over the design?

Ideally I would like to change colour scheme, or any other tips?

Thanks :)

@parkie_0007 - As far as I know, you can style the input field with CSS, but not the pop-up calendar.  

Thanks @TomG 

Is the above using https://flatpickr.js.org/examples/?

Thanks :)

Thanks @TomG 

Is the above using https://flatpickr.js.org/examples/?

Thanks :)

No, it is using the browser’s native html5 datepicker. You could use flatpickr instead, and that would give you the flexibility to style to calendar using CSS.

Hi @TomG 

Any idea why on mobile my date picker looks like this?

Ideally I want the single line text box to be full length, and the normal height.

Thanks :)

This is how it looks on desktop.

And can I override the colour of the date that is displayed before you make your selection?

Thanks :)

Leave a Reply


Terms & Conditions