+8
I am using the instructions on this website to add a date picker and calculate age. The code works fine but after picking the date, I keep seeing the date picker on every following page of the survey after that (attached screenshot). Is there a way to resolve this issue?
Best answer by Mannila
View original
+14
It seems like the date picker might not be getting cleared properly after you've used it on the initial page. You should ensure that you're properly dismissing or hiding the date picker after it's been used. If you're using code to display or hide the date picker, double-check that the logic for hiding it is working correctly. If you're still facing issues, you might need to share the relevant parts of your code for a better understanding
+8
Here is the code used:
In the Question text (HTML view)
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
In the JavaScript of the Question
Qualtrics.SurveyEngine.addOnload(function() {
function calculateAndSaveUserAge(date) {
var todayInSeconds = new Date().getTime();
var birthdayInSeconds = date.getTime();
if (birthdayInSeconds < todayInSeconds) {
var ageInSeconds = todayInSeconds - birthdayInSeconds;
var ageInYears = Math.round(ageInSeconds / 1000 / 60 / 60 / 24 / 365);
Qualtrics.SurveyEngine.setEmbeddedData("Age", ageInYears);
} else {
alert("You cannot be born in the future!");
}
}
var inputId = 'QR~' + this.questionId;
var picker = new Pikaday({
field: document.getElementById(inputId),
firstDay: 1,
minDate: new Date(1900, 01, 01),
maxDate: new Date(),
yearRange: [1900,2023],
onSelect: function(date) {
calculateAndSaveUserAge(date);
}
});
});
+14
Your code seems fine, and the issue might be due to how the Pikaday date picker instance is managed across different pages of your Qualtrics survey. To ensure that the date picker doesn't persist on subsequent pages, you should make sure that the Pikaday instance is properly destroyed when the page changes.
You can do this by adding the following code to your addOnload function:
Qualtrics.SurveyEngine.addOnUnload(function() {
picker.destroy();
});
This code will ensure that the Pikaday instance is destroyed when the page unloads, preventing it from lingering on subsequent pages. Make sure to include this addOnUnload function right after your existing addOnload function. This should help resolve the issue of the date picker persisting on following pages of the survey.
+14
+8
addOnUnload function to the code. However the issue still persists. Do you think the ‘In the Question text (HTML view)’ has something to do with this? I read that one should specify QID for any CSS/HTML. If that is the case, what would that look like?
+14
When you're applying CSS or HTML in the "In the Question text (HTML view)" section, you can use the following syntax to target specific elements using their QID:
<style>
#QID .your-element-class {
/* Your CSS styles here */
}
</style>
+14
Also addOnUnload function properly and the issue persists, it's worth double-checking that the function is indeed being called and the date picker instance is being destroyed when the page unloads. You could add a simple console.log statement within the addOnUnload function to see if it's being triggered as expected. For example:
Qualtrics.SurveyEngine.addOnUnload(function() {
console.log("Unloading page. Destroying date picker...");
picker.destroy();
});
This way, you can check your browser's console log to confirm whether the function is being executed when you navigate away from the page. If the function is indeed being called and the date picker instance is being destroyed, but you're still encountering the issue, you might need to explore other aspects of your code and survey setup to identify the root cause.
+8
Hi
<style>
#QID752.your-element-class {
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
}
</style>Additionally, I have also tested for "Unloading page. Destroying date picker..." and encountered an error message that states "SE API Error: ReferenceError: picker is not defined."
Thank you again for your assistance.
+14
Hi
<style>
#QID752.your-element-class {
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
}
</style>Additionally, I have also tested for "Unloading page. Destroying date picker..." and encountered an error message that states "SE API Error: ReferenceError: picker is not defined."
Thank you again for your assistance.
I will check for the same and get back to you… meanwhile let’s see if anyone got some input or some other workarounds
+20
Additionally, I have also tested for "Unloading page. Destroying date picker..." and encountered an error message that states "SE API Error: ReferenceError: picker is not defined."
May be the variable picker is defined within the scope of your addOnLoad function. Try declare the picker variable globally for addOnUnload to access and let me know if it helps.
+8
- https://community.qualtrics.com/custom-code-12/convert-dob-to-age-22806?postid=77398#post77398
Specifically, I added the HTML code to the header in the "look and feel" tab instead of ‘In the Question text (HTML view)’. Then, in the JavaScript of that specific question, I explicitly declared the QID instead of using "this.questionid".
+14
- https://community.qualtrics.com/custom-code-12/convert-dob-to-age-22806?postid=77398#post77398
Specifically, I added the HTML code to the header in the "look and feel" tab instead of ‘In the Question text (HTML view)’. Then, in the JavaScript of that specific question, I explicitly declared the QID instead of using "this.questionid".
it’s good it worked.
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.