How to show event dates with local time | XM Community
Skip to main content

How to show event dates with local time

  • August 22, 2022
  • 3 replies
  • 135 views

Forum|alt.badge.img+3

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?

3 replies

bgooldfed
Level 4 ●●●●
Forum|alt.badge.img+25
  • Level 4 ●●●●
  • August 23, 2022

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!


Forum|alt.badge.img+3
  • Author
  • August 23, 2022

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([], {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);


bgooldfed
Level 4 ●●●●
Forum|alt.badge.img+25
  • Level 4 ●●●●
  • August 24, 2022

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.