Help - Implementing a Calendar Picker in Qualtrics Survey for Date Selection

Hi everyone,

I'm looking for a way to create a question in a survey project where the customer can select a date from a calendar instead of typing it in. Currently, I have a simple Text Entry question with a custom Regex validation, but my client is not completly satisfied and would like to see if there is a way to replace this question with a calendar picker.

Has anyone successfully implemented this type of question in a survey and could help me out?

Thanks

Page 1 / 1

Use flatpickr. There are a bunch of posts about it on the Community.

@TomG

I am trying to integrate the Duet Date Picker into a Qualtrics survey to ensure accessibility for our users. While the date picker works perfectly in a standalone setup, I am facing challenges with displaying the calendar correctly within Qualtrics.

Specifically, the calendar popup is not showing up as expected and appears behind other elements on the page. Despite trying various z-index and positioning adjustments, the issue persists.

Here is the link to the GitHub repository for the Duet Date Picker:Duet Date Picker GitHub

I would appreciate any guidance or solutions to make the date picker accessible and correctly displayed in Qualtrics. Thank you for your support! date-picker/src at master · duetds/date-picker · GitHub https://duetds.github.io/date-picker/

@Vinoth_Mathaiyan,

I’ve never used Duet, but beside your implementation issues, it seems to come with a lot of baggage.

If you just need a simple date picker, you can use the html5 date picker. Just use JS to change the input type to date. You can add min and max attributes if needed.

Thank you @TomG

I'm working on a survey in Qualtrics that includes an accessible datepicker implemented using the WAI-ARIA practices. Seems to bring the design.
I'm facing challenges in extracting the selected date from the datepicker and storing it in embedded data.

Here's the scenario:

I've implemented a datepicker using the following libraries:

jQuery
jQuery UI
WAI-ARIA datepicker libraries (as specified in the previous responses)
I've included accessibility features like ARIA attributes (aria-haspopup, aria-autocomplete, aria-expanded) for an inclusive user experience.

I want to store the selected date in embedded data only after the "Next" button is clicked to ensure data integrity.But JavaScript is not working

HTML
<div id="myDatepicker" class="datepicker">
<div class="date"><label for="id-textbox-1">Date</label>
<div class="group"><input type="text" placeholder="mm/dd/yyyy" id="id-textbox-1" aria-describedby="id-description-1"> <span id="id-description-1" class="desc">(<span class="sr-only">date format: </span>mm/dd/yyyy)</span><button type="button" class="icon" aria-label="Choose Date"><span class="fa fa-calendar-alt fa-2x"> </span></button></div>
</div>

<h2 id="id-grid-label" class="month-year" aria-live="polite">February 2020</h2>
<button type="button" class="next-month" aria-label="next month"><span class="fas fa-angle-right fa-lg"> </span></button><button type="button" class="next-year" aria-label="next year"><span class="fas fa-angle-double-right fa-lg"> </span></button></div>

<div class="dialog-ok-cancel-group"><button value="cancel" class="dialog-button">Cancel</button><button value="ok" class="dialog-button">OK</button></div>

JavaScript
Qualtrics.SurveyEngine.addOnload(function() {

   var selectedDate = jQuery('#id-datepicker-1').val();
   console.log(selectedDate);
Qualtrics.SurveyEngine.setEmbeddedData('CalenderStartDate', selectedDate);
});

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded