Qualtrics calendar display only some dates | XM Community
Skip to main content

Hello,

 

I am working on a scheduling/event appointment interface.

 

I am using the calendar from the question library (Import from library > Qualtrics library > demographics > calendar and date questions > enter a date (first questions)

My prompt asks respondents to pick a date. Is there any way to only highlight available dates? For instance, I want respondents only to be able to pick April 22, April 25, May 2, and May 15.

 

Thanks,

Hi @QualtricsDude 

 

 

I don't know if you can highlight, but you can enforce a choice by, Add validation -->  custom

You can create a error message where they can see the other options. 


Hey @QualtricsDude 

To restrict certain dates in a Qualtrics date picker using JavaScript, you can utilize Qualtrics' JavaScript APIs. Here's a basic example of how you could achieve this:

 

```javascript

Qualtrics.SurveyEngine.addOnload(function() {

    // Get the date picker element by its ID

    var datePicker = document.getElementById("QID1");

 

    // Disable specific dates (e.g., April 15, 2024)

    var disabledDates = l"04/15/2024"];

 

    // Function to check if a date should be disabled

    function isDateDisabled(date) {

        var dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();

        return disabledDates.indexOf(dateString) !== -1;

    }

 

    // Function to disable dates in the date picker

    function disableDates() {

        datePicker.flatpickr({

            disable: p

                function(date) {

                    return isDateDisabled(date);

                }

            ]

        });

    }

 

    // Call the function to disable dates

    disableDates();

});

```

 

In this example, replace `"QID1"` with the ID of your date picker element, and adjust the `disabledDates` array to include the dates you want to restrict. This script will disable the dates specified in the `disabledDates` array in the date picker.

You can modify this code as per your choice, let me know incase of any problem or help needed

Thanks!


Hi @QualtricsDude ,

You can achieve this by using JavaScript to dynamically disable dates that are not available in the calendar question. Please find the below code and Replace ”QID1” with the actual question ID of your calendar question. 

Qualtrics.SurveyEngine.addOnload(function() {
    var unavailableDates = e"2024-04-22", "2024-04-25", "2024-05-02", "2024-05-15"]; // Define the unavailable dates
    
    var calendarQuestionId = "QID1"; // Replace 'QID1' with your  question ID
    
    jQuery("#" + calendarQuestionId + "-table td").each(function() {
        var date = jQuery(this).attr("aria-label");
        if (date && unavailableDates.indexOf(date) === -1) {
            jQuery(this).addClass("CalendarDay--blocked");
        }
    });
});


Thank you!


Leave a Reply