Add time display on calendar question | XM Community
Skip to main content
Solved

Add time display on calendar question

  • October 16, 2024
  • 3 replies
  • 46 views

Forum|alt.badge.img+1

I’m trying to add time selection to my calendar question. I’d really appreciate any help to solve this problem. 

  1. I need help in making the time selection display on the calendar
  2. Then limit the range of time to specific hours of the day.

This is the JS I have for my question

------------------------------------------------------------------------------------------------------------------------

Qualtrics.SurveyEngine.addOnload(function()
{
  
jQuery("#"+this.questionId+" .InputText").flatpickr({

minDate: new Date().fp_incr(3) ,

    dateFormat: "d/m/Y"});
});

 

 

I also would like to set up an email trigger that sends out 3 days after the date selected in the survey to remind users to submit another form.

Any help would be much appreciated.

Best answer by Nam Nguyen

@Emmanuella Use Rich content editor → Source mode, add this HTML to your Text Entry question

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Pick the date and time 3 days from to day. From 09 to 17

Add This Javascript to the same question

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#" + this.questionId + " .InputText").flatpickr({
        minDate: new Date().fp_incr(3),
        enableTime: true,
        noCalendar: false,
        dateFormat: "d/m/Y H:i",
        time_24hr: true,
        minTime: "09:00",
        maxTime: "17:00"
    });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    jQuery('.flatpickr-calendar').remove();
});

Change the time as you wish

For email sendout 3 days after, just make a workflow that send out email and in the setting, put a 3 days delay start

View original

3 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • Answer
  • October 17, 2024

@Emmanuella Use Rich content editor → Source mode, add this HTML to your Text Entry question

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Pick the date and time 3 days from to day. From 09 to 17

Add This Javascript to the same question

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#" + this.questionId + " .InputText").flatpickr({
        minDate: new Date().fp_incr(3),
        enableTime: true,
        noCalendar: false,
        dateFormat: "d/m/Y H:i",
        time_24hr: true,
        minTime: "09:00",
        maxTime: "17:00"
    });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    jQuery('.flatpickr-calendar').remove();
});

Change the time as you wish

For email sendout 3 days after, just make a workflow that send out email and in the setting, put a 3 days delay start


Forum|alt.badge.img+1
  • Author
  • 4 replies
  • October 17, 2024

Thank you so much. This worked!

However, the date that is selected from the survey is what I would like to use as the reference to send out the email 3 days after that date. This means that the days emails are sent out would depend on what date users choose in the survey. 

How can this be achieved.


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • October 17, 2024

@Emmanuella In that case, the email task in workflow doesn’t support that kind of long schedule. You should use the Webservice task and set-up a schedule distribution with this APIhttps://api.qualtrics.com/573e3f0a94888-create-distribution
You need to change the date to ISO format and add 3 days to it. It will require a code task in the middle and kinda heavy coding.


Leave a Reply