Adding Calendar and Time picker to Form Question type | XM Community
Skip to main content

Is there any way allow a date and timepicker in a form question type please?
I think there could be a way using Javascript or Flatpickr but I am still lost looking at the documentation as I’m not technically trained.

Check these, might help

  1.  

  2.  


@sz3w3i,

You can do this (works with any layout including New Experience):

Qualtrics.SurveyEngine.addOnload(function() {
this.getQuestionContainer().querySelectorAll("inpututype=text]").forEach(
input => input.setAttribute("type","datetime-local")
);
});

 


@sz3w3i,

You can do this (works with any layout including New Experience):

Qualtrics.SurveyEngine.addOnload(function() {
this.getQuestionContainer().querySelectorAll("inpututype=text]").forEach(
input => input.setAttribute("type","datetime-local")
);
});

 

Wow this works beautifully but all my form fields are now a calendar hahaha. 
How can I apply it to a specific form field please?

I think my question now is, how do I understand the javascript to position drop-down options later on...like of “Type of Customer” I would like to have drop-down “Short Term / Long Term”.

Thanks so much!

 


@sz3w3i,

You can do just the first field like this:

Qualtrics.SurveyEngine.addOnload(function() {
this.getQuestionContainer().querySelectorAll("inpututype=text]")"0].setAttribute("type","datetime-local");
});

As for adding a drop-down, that is more complicated. I have a function that does it, but I haven’t yet updated it to work with “New Experience”.


@sz3w3i,

You can do just the first field like this:

Qualtrics.SurveyEngine.addOnload(function() {
this.getQuestionContainer().querySelectorAll("inpututype=text]")"0].setAttribute("type","datetime-local");
});

As for adding a drop-down, that is more complicated. I have a function that does it, but I haven’t yet updated it to work with “New Experience”.

In case you’re interested, I’ve updated the function referenced above to support the New Survey Experience. Using your example:

formSelects New Survey Experience example

 


@sz3w3i,

You can do just the first field like this:

Qualtrics.SurveyEngine.addOnload(function() {
this.getQuestionContainer().querySelectorAll("inpututype=text]")"0].setAttribute("type","datetime-local");
});

As for adding a drop-down, that is more complicated. I have a function that does it, but I haven’t yet updated it to work with “New Experience”.

In case you’re interested, I’ve updated the function referenced above to support the New Survey Experience. Using your example:

formSelects New Survey Experience example

 

Thank you sooooo much ​@TomG! You’re a gem to this community!


Leave a Reply