Help with flatpickr - formatting dates

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.

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

Hello all
I am trying to do something similar.
We will participants to pick a date [using flatpickr and I seem to have got that working]. Later in the same project we would like to give then a date [currently 30 days later and in the format dd/mm/yyyy] when they will get a follow up. We would like to give the date rather than just “in 30 days” on screen.
I have looked at the JavaScript above and looks like it should be very possible, but my JavaScript skills are all but non-existent. And I have got nowhere trying to adapt it.
Any help will be very gratefully received.
Many thanks in advance.