Help with flatpickr - formatting dates | XM Community
Skip to main content

Hello!

I’m currently trying to manipulate the inputted date and time from a survey participants using flatpickr. For instance, if the user chose the following date and time (08/08/2024 9:00 PM) on flatpickr, I would like to subtract an hour from it and store it in an embedded value as (08/08/2024 8 PM). 

So far, I’ve created the necessary embedded data for the variables in the survey flow, and wrote the following Javascript:

 

Using the written code, I’m able to display a calendar and time for the participants to choose: 

However, the manipulated date is not showing up in the next subsequent question; nothing shows up for ${e://Field/cigevent1} and ${e://Field/cigevent2} displayed in the next subsequent question. What I’m guessing is that something wrong happened in formatting the dates in the Javascript code, so its not correctly displaying as a piped text in the subsequent questions.

I would very much appreciate it if someone could guide me on how to correctly store the date and time, and manipulated them based off of my Javascript code.

Thank you!

Hey @JoshUR

Which layout are you using? setEmbeddedData does not work for simple layout. Rather use setJSEmbeddedData in this case. 

If this is not the issue, add some console.log(cigevent1) to the code after the variable was defined and check the browser console to see if the variable contains data or if this is the issue. 

If setting the variable value is not the issue, I guess the issue is the addOnPageSubmit method. Not sure if it is possible to set embedded data in there. A workaround could be to define some listener for the flatpickr element in the addOnload method. The listener should then update the embedded data once the selection of the picker changes. To further assist on this approach, it would be could if you could paste your current JavaScript code instead of the screenshot. 

Best
Christian


Hi @chackbusch!

Thank you for your response. 

I originally had the flatpickr setup so that it only asked for the date, instead of the date and time. When only asking for the date, I was able to achieve what I wanted; manipulating the inputted date. For instance: 

The previous code worked perfectly fine, where I was able to store and pipeline ${e://Field/cigsameday} and ${e://Field/cigpriorday} in subsequent questions. However, the issue I am currently having occurs happens after I add in the time component alongside the date. I would like to capture and manipulate the date and time, as described in my original post. As requested, I’ve posted the code in the following for JavaScript:

Qualtrics.SurveyEngine.addOnload(function()
{
    jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, altInput: true,
                                                         altFormat: "m/d/Y h:i K", dateFormat: "m/d/Y h:i K", 
                                                         minDate: new Date().fp_incr(-3), maxDate:"today"});
    
});

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {

    var cigtemp1 = moment(jQuery("#"+this.questionId+" .InputText").val(), "MM/DD/YYYY hh:mm");
    var cigevent1 = cigtemp1.format("dddd, MMM Do YYYY hh:mm A");
    var cigevent2 = cigtemp1.subract(1, 'hour');
    var cigevent2 = cigevent2.format("dddd, MMM Do YYYY hh:mm A");
    
    Qualtrics.SurveyEngine.setEmbeddedData('cigevent1', cigevent1);
    Qualtrics.SurveyEngine.setEmbeddedData('cigevent2', cigevent2);
    
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

The first method of changing the Qualtrics.SurveyEngine.setEmbeddedData to Qualtrics.SurveyEngine.setJSEmbeddedData did not work. For the second method, I’m not quite sure how to observe the log, but I’m assuming it is visible in the ‘developer tool’ in my browser. This is what I see in terms of errors occurring on the respective page: 

 

Lastly, I’m not familiar with JavaScript, so I’m having a bit difficulty understanding your last suggestion. However, It seems that an error is occurring with the subtract function in flatpickr.


Hi @JoshUR

still need to screen your answer in detail but the log says that you have an issue in your code. 

The method is subtract not subract

Best
Christian


Oh my, thanks for catching the mistake! It seems fixing that simple mistake fixed everything! Thanks @chackbusch!


Leave a Reply