Content validation for default date picker | XM Community
Solved

Content validation for default date picker

  • 17 February 2019
  • 12 replies
  • 374 views
J
I'm currently using the second date picker from the default qualtrics library. This is the one which actually displays a calendar as opposed to the others that have drop downs. I'd like to be able to validate that the date that is actually chosen is not more than 30 days before the current date.

I believe the other default date pickers allow you to set a range of dates but I would like to use this calendar since it is displayed and I would like for it to be agnostic to when the survey is actually taken so no range is hardcoded. Is there some code I can inject somewhere to do this? I am quite inexperienced with Javascript. Thanks in advance!
icon

Best answer by fleb 20 February 2019, 12:49

View original

12 replies

fleb
Rank
Userlevel 5
Badge +6
Hi @JordanP,
if you'd use jQuery Datepicker (another pop-up calendar), you could allow your respondents to select only dates in the range you want (parameters `minDate` or `maxDate`; you can define it relatively to the current date) and don't let them change the date manually.

!


Note: In the code below I use my own HTML input element (`<input type="text" id="datepicker">`), which value isn't stored by Qualtrics automatically. Therefore I need to tell Qualtrics to store it in an embedded data field whend the page is sbmitted (the `Qualtrics.SurveyEngine.addOnPageSubmit` part of the code ).

1) Define an embedded field called "date" in the survey flow.
2) Create a Descriptive text question in Qualtrics
3) Paste there the following code (using HTML view of the question)

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Datepicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
minDate: '-30'
});
} );

Qualtrics.SurveyEngine.addOnPageSubmit(function()
{
Qualtrics.SurveyEngine.setEmbeddedData( 'date', document.getElementById('datepicker').value );
});

</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>
J
Thanks @fleb! This works pretty well. I had a follow-up question since I am using this datepicker now in a loop and merge block.

I ask the user to input a certain number and then use that to determine how many times I loop. I ask them to pick a date in each loop and then ask a few questions associated with that date. I'd like to add some kind of custom validation that allows me to ensure that they don't pick the same date twice. Is that possible using this date-picker? Thanks!
fleb
Rank
Userlevel 5
Badge +6
Hi @JordanP,
if you want to use the date-picker in a Loop & merge block, you should concatenate the value of your embedded field with a new value from the date-picker and some separator and update your embedded field with this new text to store all values and not just the last one.
In the next loop you'd get this text again, split it into an array using your separator and exclude these dates from your calendar as described for example here.
To be honest, I have no idea, how did you make my code work in a Loop & merge block. I tried it and the calendar worked just in the first loop. I think it could be because of the same ID of multiple elements. Let me know about your solution, please.
J
Hi @fleb,

I created a number of embedded variables for the maximum number of loops (date1, date2...date30). I then changed a part of your code to read:

Qualtrics.SurveyEngine.setEmbeddedData( "date${lm://CurrentLoopNumber}", document.getElementById("datepicker").value );


It's discussed a bit [here].(https://www.qualtrics.com/community/discussion/comment/11807#Comment_11807 "here")
fleb
Rank
Userlevel 5
Badge +6
Hi @JordanP,
that's not what I meant. If I turn on Loop & merge in the block with the date-picker, the calendar appeared when I clicked into the text field only in the first loop. Nothing appeared after clicking into the text field in all next loops. Did you manage to solve this?
I've tried to move part of the code or the whole code into the header, but nothing helped.
J
Hi @fleb,
I just realized that this is happening - I had not tested it properly. It also occurs when I go "back" in the survey to try and pick a date again. Does that give you any clues? I can' tell if it's an issue with JQuery or the Qualtrics survey engine.
fleb
Rank
Userlevel 5
Badge +6
Hi,
I have no idea where is the problem. However, I'm also beginner in JavaScript. You could try to ask another question, maybe someone more experienced would solve it. If this issue will be solved, excluding certain dates shouldn't be a problem.
J
Hi @fleb,
I did ask a different question (http://https://www.qualtrics.com/community/discussion/3802/jquery-does-not-load-the-calendar-in-a-loop-and-merge-block-after-the-first-block)

and credited you for the code as well. I've figured out how to restrict the date range but hopefully someone can figure this out.
J
Sorry, that link is broken:

https://www.qualtrics.com/community/discussion/3802/jquery-does-not-load-the-calendar-in-a-loop-and-merge-block-after-the-first-block#latest
J
Hi @fleb,
I tested it out some more and found that just putting the datepicker twice in a survey breaks it in the same way i.e. only the first occurrence of a datepicker question actually displays the calendar and the subsequent ones don't.
J
Hi @fleb,
I ended up going with a different date picker called flatpickr that's a lot lighter and works really well and is really simple to implement.

1. Pick text entry for your question type.

2. Switch to Rich Text Format and hit the source button. Paste this code in there:

```
Enter a date: <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

```

3. Inject this javascript bit by hitting the knob on the left. You can make all the range changes here based on the examples on the flatpickr website:

```
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" input[type=text]").flatpickr({minDate:new Date().fp_incr(-30),maxDate:new Date().fp_incr(-1)});
});

```

Hopefully this helps and thanks for your help too!
G
Hi @JordanP,

Thanks for the tip with the flatpickr date picker. I tested it out on a survey where I used it on the last question, and when the response is submitted, the end of survey message looks a little glitchy. Attached is a screenshot of what's happening. Any idea why this might occur?

Thanks

Leave a Reply


Terms & Conditions