A react-based component that displays a calendar component in Qualtrics.
- Collection of multiple date, time, or datetime responses in one question.
- e.g., "From:" and "To:"
- In the survey edit screen, click "Look & Feel" on the top-right.
- Select the "General" tab and then edit the "Header".
- Click the "<>" icon to enter the coding view.
- Copy and paste the following code.
<script src="https://cdn.jsdelivr.net/gh/keita-makino/[email protected]/dist/bundle.js"></script>
- The question type has to be set to "Form field".
- Click the question text and click "Rich Content Editor...".
- Click the {A} button at the top-left and click "Survey Question".
- Search this question and click "Question Text".
- A code
${q://"Some ID"/QuestionText}
will be inserted so save the ID for later use. - Edit the text fields on the rows as you need.
- Select the "JavaScript" option from the side menu or click </> icon next to the question text to enter the coding view.
- Copy and paste the code below. Please select one of the date, time, or datetime options.
- All done!
Qualtrics.SurveyEngine.addOnload(function () {
/*Place your JavaScript here to run when the page loads*/
});
// If you need just the date
Qualtrics.SurveyEngine.addOnReady(function () {
calendarRender(
document.getElementById(
'The question ID, make sure the ID is surrounded by the double-quotation',
'date'
)
);
});
// If you need just the time
Qualtrics.SurveyEngine.addOnReady(function () {
calendarRender(
document.getElementById(
'The question ID, make sure the ID is surrounded by the double-quotation',
'time'
)
);
});
// If you need both the date and time
Qualtrics.SurveyEngine.addOnReady(function () {
calendarRender(
document.getElementById(
'The question ID, make sure the ID is surrounded by the double-quotation',
'datetime'
)
);
});
Qualtrics.SurveyEngine.addOnUnload(function () {
/*Place your JavaScript here to run when the page is unloaded*/
});