Hi, I'm looking for a way to show event dates with a local time.
The use case is to ask respondents to indicate their availability for 4 dates. For example, an event would take place on August 29, 14:00 UTC. When viewed by a respondent in CET+2 timezone (or -120 offset) would be displayed as.
[]August 29 16:00 CET+2
This is what I've tried so far. Seemed to be working, but I must have changed something as it no longer does.
1 - Get the offset and store it as embedded data
var offset = new Date().getTimezoneOffset();
console.log(offset);
Qualtrics.SurveyEngine.setEmbeddedData('offset', offset);
2 - Get the timezone and store it as embedded data
const [timeZone] = new Date().toString().match(/([A-Z]+[+-][0-9]+)/);
Qualtrics.SurveyEngine.setEmbeddedData('timezone', timeZone);
3 - Use the timezone to manipulate event date and times
var answer = "${e://Field/timezone}";
const date1 = new Date('August 29, 2022 16:00:00' + answer);
const date2 = new Date('August 29, 2022 18:00:00' + answer);
const date3 = new Date('August 30, 2022 17:00:00' + answer);
const date4 = new Date('August 29, 2022 19:00:00' + answer);
console.log(date1);
console.log(date2);
console.log(date3);
console.log(date4);
4 - And store dates with local time as embedded data for display
Qualtrics.SurveyEngine.setEmbeddedData('session1', date1);
Qualtrics.SurveyEngine.setEmbeddedData('session2', date2);
Qualtrics.SurveyEngine.setEmbeddedData('session3', date3);
Qualtrics.SurveyEngine.setEmbeddedData('session4', date4);
I'm at a loss. Also tried using Luxon (i.e. Moment) js library, but ran into other issues. Does anyone have recommendations on a better approach or can point out where I'm going wrong?
Hi Hester,
Most likely you're mixing strings with dates, which won't compute nicely. Date objects are pretty strict, it's usually best to approach conversions by adding/subtracting a separate date object and then converting to a string:
const [timeZone] = new Date().toString().match(/([A-Z]+[+-][0-9]+)/);
var offset = new Date().getTimezoneOffset();
const date = new Date('August 29, 2022 16:00:00'); //our date to be converted
var offsetDate = new Date(date*1 + offset*60*1000) //creating a new date by converting our original date and offset to miliseconds and adding them together
var offsetDateText = offsetDate.toLocaleDateString() + " " + timeZone //a string of the new date
console.log(offsetDateText) // "8/29/2022 GMT+1000"
Tinker with options as need be.
Good luck!
bgooldfed thank you so much! The formula to convert to a local date was especially where I felt utterly lost.
Below are some changes I made for posterity and in case it's beneficial for others.
const [timeZone] = new Date().toString().match(/([A-Z]+[+-][0-9]+)/);
var offset = new Date().getTimezoneOffset();
const date1 = new Date('August 29, 2022 14:00:00'); //our date to be converted
const options = { weekday: 'short', year: '2-digit', month: 'short', day: 'numeric' }; // some additional formatting to show weekday more clearly
console.log(timeZone) // GMT+1000 Logged and embedded timeZone seperately, also because it gave me more control over formatting in the survey
Qualtrics.SurveyEngine.setEmbeddedData('timeZone', timeZone);
var offsetDate1 = new Date(date1*1 - offset60*1000)
// creating a new date by converting our original date
// and offset to miliseconds and adding them together
//Adjusted the calculation to state - offset*60*1000 instead of + offset*60*1000 I think it's because offset returned is negative when +GMT and positive when -GMT. This seems to work ♀
var offsetTimeText1 = offsetDate1.toLocaleTimeString(e], {hour:'2-digit', minute: '2-digit'}) /*+ " " + timeZone //a string of the new date*/
// Added toLocaleTimeString so that I could have more control over formatting for date and time. Also commented out timezone as I'm embedding and adding a field separately for formatting
// Added undefined locale and date formatting options
var offsetDateText1 = offsetDate1.toLocaleDateString(undefined, options); //a string of the new date
console.log(offsetTimeText1) // "14:00:00"
console.log(offsetDateText1) // "Mon, 29 Aug 22"
Qualtrics.SurveyEngine.setEmbeddedData('offsetTimeText1', offsetTimeText1);
Qualtrics.SurveyEngine.setEmbeddedData('offsetDateText1', offsetDateText1);
For anybody else visiting this thread struggling with dates, bear in mind that they are just a number expressed in miliseconds. So if all else fails, working in miliseconds should be reliable.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.