Use moment.js to do the calculations.
You could use flatpickr for the time inputs. That way each time would be in a single field.
There are a number of Community posts about flatpickr and a few about moment.js.

Thank you so much Tom. I will look into those two options

TomG

Tom, thank you so much for your input. I was able to successfully use flatpickr for the time inputs in my matrix table, however I am running into issues with the momentjs for calculations. I looked on the available forums on the Qualtrics community and was able to find a thread for date but not for time. I want to create a new question and calculate the total time spent in bed, asleep, and then calculate a sleep efficiency score by dividing the two variables and multiplying by 100. How can I go about doing this for my previous matrix question with the times for each day? Can I use a variation of the below code that you posted on another forum?

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
   var monbed = moment(jQuery("#"+this.questionID+” .InputText").val()).subtract(2, 'weeks');
   Qualtrics.SurveyEngine.setEmbeddedData('startDate', startDate);
});

https://www.qualtrics.com/community/discussion/comment/29143#Comment_29143I think you'll want to use moment's diff function:
https://momentjs.com/docs/#/displaying/difference/

TomG

Hi Tom, below is the code I have but it is not working. I would appreciate any feedback. I am very new at this and have no prior experience of any coding using Java, especially within the context of Qualtrics

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var s0 = "${q://QID2362/SelectedAnswerRecode/10/3}";
console.log(s0);
var s1 = "${q://QID2362/SelectedAnswerRecode/10/1}";
console.log(s1);
var t0 = moment(s0);
console.log(t0.format());
var t1 = moment("${q://QID2362/SelectedAnswerRecode/10/1}");
console.log(t1.format());
var tdiff = t0.clone().diff(t1, 'hours')
console.log(tdiff.format());
});

I'm working blind since I can't see console output, but two things jump out:

1. I don't know what format your piped dates are in, but you should probably specify the format to make sure moment parses them correctly.


2. t0 is a variable, not a DOM element, so clone() is incorrect. You don't need it.



---

TomG

This is my code for the sleep diary and the format the times are in are HH:MM (12:30 AM/PM) for example. I also attached my console for the feedback component that I am trying to use.


Qualtrics.SurveyEngine.addOnReady(function()
{
   /*Place your JavaScript here to run when the page is fully displayed*/
      var Qbd = "input id='QR~"+this.questionId+"']";
   jQuery("#" + this.questionId + " .InputText").hide();
   jQuery("#appt-time").on(" change", function() {
      jQuery(Qbd).val(jQuery("#appt-time").val()) ;
      });
   jQuery("#"+this.questionId+" td.c4 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
   jQuery("#"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
   jQuery("#"+this.questionId+" td.c6 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
});

From the "moment not define" error, it looks like you haven't loaded moment in the survey header.

TomG

Do I put the below code under the header under look and feel in the survey? Is there anywhere else I need to enter in specific code? Since I already have flatpickr in the header would it look like this with the moment js?

https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /> ">https://cdn.jsdelivr.net/npm/flatpickr">

https://www.qualtrics.com/community/discussion/comment/29241#Comment_29241Correct, that should be all you need.

TomG

Is there anything specific I need to include under the survey flow for this to run? It is still not working