Utilizing Date Range Picker for Qualtrics date selection.

For some reason, one of Qualtrics question types is not Date or Timestamp. You can validate a text entry to required a date format but that does not give you any kind of UI for the user. In a quick search, the only easy solution I found was this one on Brown University IT Qualtrics support. It’s not great but it gave me the idea to use Date Range Picker. The implementation is incredibly simple with one minor hiccup that was also easily solved.

  1. Copy the links to the required scripts from the Usage section of the Date Range Picker documentation.
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

2. On the Project in Qualtrics go to the Look & Feel settings, click on the Advanced tab, paste the links into the Header area, and Save.

3. For each question that needs a date picker click on the settings gear icon and choose Add JavaScript…

4a. Single Date: Paste the following code in the addOnLoad section; modify the QID in all seven instances. In this example I am using the Form Text Type, so there is an additional number to identify the field within the form of this question. For a Single Line Text Type it would be simply QR~QID1~TEXT.

$('input[name="QR~QID1~3~TEXT"]').daterangepicker({
singleDatePicker: true,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});

var x = document.getElementById('QR~QID1~3');
x.addEventListener('focusout', hideFixFunction);
function hideFixFunction() {
document.getElementById('QR~QID1~3').style.display = "inline-block";
}
$('input[name="QR~QID1~3~TEXT"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY'));
document.getElementById('QR~QID1~3').style.display = "inline-block";
});
$('input[name="QR~QID1~3~TEXT"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
document.getElementById('QR~QID1~3').style.display = "inline-block";
});

4b. Date Range: Paste the following code in the addOnLoad section; modify the QID in all five instances. Again I am using the Form Text Type, so there is an additional number to identify the field within the form of this question. For a Single Line Text Type it would be simply QR~QID6~TEXT. Also, notice in the picture I repeat the code for the next field in the form. This only necessary if you intend to use the picker for additional fields in the form. Additionally, be sure have unique Variable names and Function names for each field (this is inefficient code but it works … if I find a cleaner method I will post it)

$('input[name="QR~QID6~1~TEXT"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
 var x = document.getElementById('QR~QID6~1');
x.addEventListener('focusout', hideFixFunction);
function hideFixFunction() {
document.getElementById('QR~QID6~1').style.display = "inline-block";
}
$('input[name="QR~QID6~1~TEXT"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
document.getElementById('QR~QID6~1').style.display = "inline-block";
});
$('input[name="QR~QID6~1~TEXT"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
document.getElementById('QR~QID6~1').style.display = "inline-block";
});

Explanation

For the simple implementation that is all you need, however Date Range Picker is quite powerful and gives you a full range of options. I’m not going to go through them all here. But, I will explain the code I used.

Warning!

This was very easy to implement. The one hiccup was that the code overwrites the display style of the input element to “none” when the selection is applied. So, it looks as if your field disappears. This is most likely a conflict between the Qualtrics and Date Range Picker CSS implementation. To solve this issue, I added code to override this on the apply and cancel calls of the picker to restore it to “inline-block”. This issue effects tabbing and clicking off the picker as well and required a event listener to fix. As you play with other options and configurations, be sure to keep these in your code. If you are not using the Input Initially Empty template (further explanation below) you don’t need the previous lines that start “$(this).val” and in fact may need to be deleted.

Input Initially Empty & SingleDatePicker

The Date Range Picker documentation, examples, and configuration generator make this process quite simple. I started from the Input Initially Empty example for two reasons. First, the picker automatically adds default content to the field it is applied to and this screws with Qualtrics forced required validation. Second, it already had the on apply and on cancel watches I needed to solve the issue I described above. For the Date Range fields that was the only thing I needed to change.

For the Single Date field I added that option “singleDatePicker: true,”. However, since the Initially Empty template is being used, the second date needs to be removed from being applied on apply.

Input Initially Empty example
Changes made for use with Qualtrics and singleDatePicker option

$(this).val

These lines are necessary because “autoUpdateInput” option is set to false. If you are not using this option they are not needed.