HTML Date picker | XM Community
Skip to main content
Solved

HTML Date picker


Forum|alt.badge.img+1

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

Best answer by TomG

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");
});

 

View original

9 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5935 replies
  • Answer
  • October 17, 2023

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");
});

 


Forum|alt.badge.img+1
  • Author
  • 1 reply
  • October 17, 2023
TomG wrote:

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.  


Forum|alt.badge.img+5
  • Level 5 ●●●●●
  • 151 replies
  • January 24, 2024

Love this :) 


Forum|alt.badge.img+5
  • Level 5 ●●●●●
  • 151 replies
  • January 24, 2024

Love this @TomG !

Do I have any control over the design?

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

Thanks :)


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5935 replies
  • January 24, 2024

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


Forum|alt.badge.img+5
  • Level 5 ●●●●●
  • 151 replies
  • January 25, 2024

Thanks @TomG 

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

Thanks :)


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5935 replies
  • January 25, 2024
parkie_0007 wrote:

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.


Forum|alt.badge.img+5
  • Level 5 ●●●●●
  • 151 replies
  • January 31, 2024

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


Forum|alt.badge.img+5
  • Level 5 ●●●●●
  • 151 replies
  • January 31, 2024

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