How do i disable my date text field when I'm using date picker to select date? Currently I'm getting multiple date formats in our data although I've setup date picker. I prefer to disable the manual input so folks will use date picker instead. This is the custom code I have setup for my date field. Any suggestions on what is missing? I can still manually enter the dates although it is readonly.
Qualtrics.SurveyEngine.addOnload(function()
{
var textInputs = this.questionContainer.querySelectorAll('input[type="text"]');
if (typeof textInputs[0] !== 'undefined') {
textInputs[0].type = 'date';
}});
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("[id='QR~QID10~TEXT']").attr("readonly",true);
});
Qualtrics.SurveyEngine.addOnUnload(function()
{ /*Place your JavaScript here to run when the page is unloaded*/
});
Setting date field as read only while using date picker
Best answer by mingchiat
Thanks Jeremy for your suggestions. Indeed Flatpickr is the better solution and truly versatile.
By adding this additional script in OnLoad, it works.
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "m/d/Y"
});
Thank you so much!
+7On this line in your addOnReady:
jQuery("[id='QR~QID10~TEXT']").attr("readonly",true);
try grabbing the id using:
jQuery('#QR~QID10~TEXT').attr("readonly",true);
Hi Jeremy,
I tried your suggestion, but somehow I can still manually enter date in the text box. Just to be sure, when an attr is set as readonly, what is the expected behaviour? Are users allowed click on that text box and enter data but Qualtrics will not pickup that data?
I did an inspect on that particular text box and got this in return.
Thanks.
+7"Readonly" should make the textbox greyed out, even visually I believe, so users will not even be able to click into the box (make the element active). Could you export your survey and upload the qsf file? I'd be happy to take a look, but at this point, I'd need to see the question in your environment to take this further as I'm not sure why it's not working for you.
Thanks Jeremy for your suggestions. Indeed Flatpickr is the better solution and truly versatile.
By adding this additional script in OnLoad, it works.
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "m/d/Y"
});
Thank you so much!
+7TL:DR
I was able to set the textbox field to readonly without issue, but that created another problem: the user couldn't even select the date then.
And since Qualtrics' Date Picker leaves something to be desired anyways, I suggested using FlatPickr, a free, third party date picker. Mingchiat will use it going forward for choosing the date.
Ultimately, even if you can set the field as a read only, or get past the issue where the surveyor cannot pick a date from the "read only" calendar widget, the value of the captured date is a "Text" data type. This limits the searches (in report filters) to only filter patterns for "Text" data, and you cannot do a search by numerical date range. For example, using the calendar widget, you cannot do a search of all entries Between 1/1/2021 to 3/31/2021, or all entries Greater than or Equal To 7/1/2021.
We need a Calendar Widget that captures dates as "Numerical" data and not "Text" data. That is the enhancement we need regardless if you are manually typing the date (not ideal) or capturing the date using the calendar widget (ideal).
Thank you,
Srini
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.