Custom Calendar-Only Having one day available to select | XM Community
Skip to main content

Hi All, I have two date selection questions in my survey where I would like one of them to only have respondents be able to select Saturdays and the other to only be able to select every other Sunday. Is there a code for this? And how would I input this code? Also, can I add quotas so only a certain number of respondents can select each day? I appreciate your help as I am relatively new to Qualtrics. Thank you in advance!

I would look at flatpickr. This is very flexible, and I think it can be set up to do what you are looking for,


Please try the following:


To make it work, you to add this code below in the Look & Feel > General > Header > Source View:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

This makes sure you can access and use flatpickr from your questions.

In the question, you then need to add this code in the onReady function in the JS of a Text Entry question:

Use the below code in the text entry question JavaScript.

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d H:i",
    minDate: new Date(),
    enable: "2023-05-06", "2023-05-13", "2023-05-20", new Date(2023, 5, 6) ]        
    });
});

You will have to specify all the dates you want to be enabled, but at least it works :)


What does it mean if there is no source view?


It is there 😀

Look for the <> icon. 

When you see the text in source mode, then you are viewing the HTML version of the page


When I add javascript, I see the source mode. What is the next step from there?

 


You should just add the two line above in the header. The Javascript should go in the Javascript part of the Text Entry question.


Thanks! It worked.

How do I go about only having Saturdays or Sundays as options and only having a certain amount of Saturdays and Sundays being available to be selected?


Did you copy the code above? Then you should see only 2 days to be able to be selected.

If you look at this code:

Qualtrics.SurveyEngine.addOnReady(function()
{
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d H:i",
    minDate: new Date(),
    enable: "2023-05-06", "2023-05-13", "2023-05-20", new Date(2023, 5, 6) ]        
    });
});

The bold part is the dates, so you will need to define the full range of dates you wish to be available in that format.


Is there a way to make it every Saturday without having to list them all?


I found this:

function getAllSaturdays(year) {
  const saturdays = ];
  const date = new Date(year, 0, 1); // January 1st of the given year
  while (date.getFullYear() === year) {
    if (date.getDay() === 6) { // Saturday is day number 6 (0 is Sunday)
      const dateString = date.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
      saturdays.push(dateString);
    }
    date.setDate(date.getDate() + 1); // Move to the next day
  }
  return saturdays;
}

const allSaturdays2023 = getAllSaturdays(2023);
 


I put this in the JS and it didn’t work. The date picker did not come up when clicking into the text box

 


Did you just add it like above, because that won't work.

Do you understand the code at all?


I got it. Thanks


Just in cases anyone needs the complete JS, this is tested and working:

Qualtrics.SurveyEngine.addOnReady(function()
{
    function getAllSaturdays(year) {
      const saturdays = d];
      const date = new Date(year, 0, 1); // January 1st of the given year
      while (date.getFullYear() === year) {
        if (date.getDay() === 6) { // Saturday is day number 6 (0 is Sunday)
          const dateString = date.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
          saturdays.push(dateString);
        }
        date.setDate(date.getDate() + 1); // Move to the next day
      }
      return saturdays;
    }

    const allSaturdays2023 = getAllSaturdays(2023);
    
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d",
    minDate: new Date(),
    enable: allSaturdays2023        
    });

});


Thank you! This works for me


Leave a Reply