Use javascript to set minimum time in flatpickr | XM Community
Skip to main content

Hi there,

 

I have a questionnaire where participants fill the start and end date of an activity they did during the day. They can enter up to 40 activities and I would like to make sure the start time of an entered activity is not before the end time of the previous activity. I considered using flatpickr but I don't get it to work.

This is what I tried:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

	var input = jQuery("#"+ this.questionId +" .InputText");
	var startTime = jQuery('#' + "QID3" + ' .InputText').val();

	input.attr("placeholder", "UU/MM");
    input.flatpickr({
		noCalendar: true,
		enableTime: true,
		time_24hr: true,
		minTime: startTime,
		minuteIncrement: 10});

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

Any help is very much appreciated!

@boude The code started Onload and I assume QID3 and this question are at the same page, at that time, startTime from QID3 is still empty. So you need to add a pagebreak between QID3 and this question to give what you put in QID3 time to saved and can be used in this question. To be sure, use piped-text to get the right QID
Replace var startTime = jQuery('#' + "QID3" + ' .InputText').val(); 
with var startTime = "${q://QID3/ChoiceTextEntryValue}";
Hope this help

Hi @Nam Nguyen, thank you so much, it works now! I had tried already putting a page break because of the javascript loading but that didn't solve the issue before. Now that I used the piped-text instead of the jQuery it does work!

Leave a Reply


Terms & Conditions