Adding Calendar and Time picker to Form Question type

Check these, might help

1. N

   • Adding Flatpickr (Timepicker) to a Question

    

2. P

   • Timepicker / PickaTime Javascript code question

    

​@sz3w3i,

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

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

Qualtrics.SurveyEngine.addOnload(function() {
	this.getQuestionContainer().querySelectorAll("input[type=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!

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

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

TomG wrote:

TomG wrote:

​@sz3w3i,

You can do just the first field like this:

Qualtrics.SurveyEngine.addOnload(function() {
	this.getQuestionContainer().querySelectorAll("input[type=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:

 

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