Setting date field as read only while using date picker | Experience Community
Skip to main content
Solved

Setting date field as read only while using date picker

  • September 7, 2021
  • 7 replies
  • 1255 views
M

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*/
});

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!

7 replies

JeremyK
Level 3 ●●●
Forum|alt.badge.img+7
  • JeremyK
  • Level 3 ●●●
  • September 8, 2021

On 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);


M
  • mingchiat
  • Author
  • September 8, 2021

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.

JeremyK
Level 3 ●●●
Forum|alt.badge.img+7
  • JeremyK
  • Level 3 ●●●
  • September 8, 2021

"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.

    M
    • mingchiat
    • Author
    • September 9, 2021

    Hi Jeremy,
    Noted and I've sent the files to you. Thanks.

      M
      • mingchiat
      • Author
      • Answer
      • September 11, 2021

      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!

        JeremyK
        Level 3 ●●●
        Forum|alt.badge.img+7
        • JeremyK
        • Level 3 ●●●
        • September 13, 2021

        TL: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.

          S
          Forum|alt.badge.img
          • Srini
          • December 29, 2021

          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

          Terms & ConditionsAccessibility statement