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 

@Shivamvig_sv Thank you for your prompt response. It seems that the issue is with the code below. However, I am unsure where to specify the logic for displaying or hiding the date picker. Any help is appreciated.

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

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.

@Mannila this should help as per my understanding… please let me know if this help :)

@Shivamvig_sv I added the 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?

@Mannila Yes, you are correct that when using CSS or HTML in Qualtrics, it's a good practice to specify the Question ID (QID) to ensure that your styling or functionality applies only to the specific question you intend it to.

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>
 

Also @Mannila If you've already implemented the 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.

Hi @Shivamvig_sv, Thank you so much for your ongoing help in resolving this issue. I have tried both of your suggestions, but unfortunately, I did not achieve any success. When I updated the code as suggested, I noticed that the date picker is no longer accessible when I preview the survey. I understand that I need to call the class "your-element-class" again in the HTML of the question, but I am not sure where and how to do this. Can you please provide me with some guidance on this matter? 

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

Hi @Shivamvig_sv, Thank you so much for your ongoing help in resolving this issue. I have tried both of your suggestions, but unfortunately, I did not achieve any success. When I updated the code as suggested, I noticed that the date picker is no longer accessible when I preview the survey. I understand that I need to call the class "your-element-class" again in the HTML of the question, but I am not sure where and how to do this. Can you please provide me with some guidance on this matter? 

<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 

 

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.

 @Shivamvig_sv, @dxconnamnguyen  Hi, I was able to solve the issue by using the Qualtrics solution. I agree even declaring it globally could have been another solution which I didn’t try.

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

  @Mannila That’s great actually, i meant the quite same while suggesting for adding the QID explicitly. 
it’s good it worked.