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

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">&nbsp;</span></button></div>
</div>

<div role="dialog" id="id-datepicker-1" class="datepicker-dialog" aria-modal="true" aria-label="Choose Date">
<div class="header"><button type="button" class="prev-year" aria-label="previous year"><span class="fas fa-angle-double-left fa-lg">&nbsp;</span></button><button type="button" class="prev-month" aria-label="previous month"><span class="fas fa-angle-left fa-lg">&nbsp;</span></button>

<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">&nbsp;</span></button><button type="button" class="next-year" aria-label="next year"><span class="fas fa-angle-double-right fa-lg">&nbsp;</span></button></div>

<div class="table-wrap">
<table role="grid" class="dates" aria-labelledby="id-grid-label">
    <thead>
        <tr>
            <th scope="col">Su</th>
            <th scope="col">Mo</th>
            <th scope="col">Tu</th>
            <th scope="col">We</th>
            <th scope="col">Th</th>
            <th scope="col">Fr</th>
            <th scope="col">Sa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" data-date="2020-02-01">1</td>
        </tr>
        <tr>
            <td tabindex="-1" data-date="2020-02-02">2</td>
            <td tabindex="-1" data-date="2020-02-03">3</td>
            <td tabindex="-1" data-date="2020-02-04">4</td>
            <td tabindex="-1" data-date="2020-02-05">5</td>
            <td tabindex="-1" data-date="2020-02-06">6</td>
            <td tabindex="-1" data-date="2020-02-07">7</td>
            <td tabindex="-1" data-date="2020-02-08">8</td>
        </tr>
        <tr>
            <td tabindex="-1" data-date="2020-02-09">9</td>
            <td tabindex="-1" data-date="2020-02-10">10</td>
            <td tabindex="-1" data-date="2020-02-11">11</td>
            <td tabindex="-1" data-date="2020-02-12">12</td>
            <td tabindex="-1" data-date="2020-02-13">13</td>
            <td tabindex="0" role="gridcell" data-date="2020-02-14" aria-selected="true">14</td>
            <td tabindex="-1" data-date="2020-02-15">15</td>
        </tr>
        <tr>
            <td tabindex="-1" data-date="2020-02-16">16</td>
            <td tabindex="-1" data-date="2020-02-17">17</td>
            <td tabindex="-1" data-date="2020-02-18">18</td>
            <td tabindex="-1" data-date="2020-02-19">19</td>
            <td tabindex="-1" data-date="2020-02-20">20</td>
            <td tabindex="-1" data-date="2020-02-21">21</td>
            <td tabindex="-1" data-date="2020-02-22">22</td>
        </tr>
        <tr>
            <td tabindex="-1" data-date="2020-02-23">23</td>
            <td tabindex="-1" data-date="2020-02-24">24</td>
            <td tabindex="-1" data-date="2020-02-25">25</td>
            <td tabindex="-1" data-date="2020-02-26">26</td>
            <td tabindex="-1" data-date="2020-02-27">27</td>
            <td tabindex="-1" data-date="2020-02-28">28</td>
            <td tabindex="-1" data-date="2020-02-29">29</td>
        </tr>
        <tr>
            <td tabindex="-1" data-date="2020-02-30">30</td>
            <td tabindex="-1" data-date="2020-02-31">31</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
            <td tabindex="-1" class="disabled">&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>

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

<div class="dialog-message" aria-live="polite">&nbsp;</div>
</div>
</div>

JavaScript
Qualtrics.SurveyEngine.addOnload(function() {

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