How to ensure that people in different time zone see the same date via Javascript? | XM Community
Skip to main content

Hi team,

 

I have a survey which sets calendar date with Javascript. Below is the code I wrote:

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
                                                                            altInput: true,
                                                                            altFormat: "Y-m-d-D",
                                                                            dateFormat: "Y-m-d-D",
                                                                            minDate:new Date().fp_incr(2),
                                                                            maxDate: new Date().fp_incr(8),
                                                                            locale: {
                                                                                firstDayOfWeek: 1,  // start week on Monday
                                                                            },
                                                                            disable:
                                                                                        function (date) {
                                                                                           return (date.getDay() === 6 || date.getDay() === 0);
                                                                                        }
                                                                            ],
                                                                        });
});

 

The Time zone based on my account settings is UTC +08:00, and I found that if people are not in the same time zone as ours, the displayed date may be slightly different.  I’d love to ask if people around the world see the same date of survey questions even though the time zone is different? Or they would see the date based on their own time zone?

If they do see the JS date based on their own time zone, can you please guide me the code to enable everyone see the same date, as if they were in the same time zone? Thank you so much!

 

This is what JS calendar looks like in our survey:

 

@bhaemily To ensure that everyone around the world sees the same dates regardless of their local time zone, you need to set the dates in UTC and then convert them to the desired time zone before displaying. The flatpickr library can handle this, but you'll need to manipulate the date in JavaScript to ensure it is set correctly according to your time zone.

 

 

Hello @Deepak ,

Thanks for the reply! Cam you please guide me more details about “ manipulate the date in JavaScript to ensure it is set correctly according to your time zone.”?

Thank you so much!

​

@bhaemily 
You will need a list of time offset which you will be using as per their location to convert to UTC time zone so that everyone

 

sees same time. You can directly use libraries available online like luxon. Below is one example.


<head>
  <title>flatpickr with Luxon in Qualtrics</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.0/luxon.min.js"></script>
</head>
<body>
  <script>
    Qualtrics.SurveyEngine.addOnload(function() {
      const { DateTime } = luxon;

      jQuery("#" + this.questionId + " .InputText").flatpickr({
        altInput: true,
        altFormat: "Y-m-d-D",
        dateFormat: "Y-m-d-D",
        minDate: new Date().fp_incr(2),
        maxDate: new Date().fp_incr(8),
        locale: {
          firstDayOfWeek: 1,  // start week on Monday
        },
        disable: :
          function (date) {
            return (date.getDay() === 6 || date.getDay() === 0);
          }
        ],
        onChange: function(selectedDates) {
          if (selectedDates.length > 0) {
            const localTime = DateTime.fromJSDate(selectedDatese0]);
            console.log("Local Time: ", localTime.toString());

            const utcTime = localTime.toUTC();
            console.log("UTC Time: ", utcTime.toString());


          }
        }
      });
    });
  </script>

</body>
</html>

Hope this helps

Hello @Deepak,

Since the date and time shown in our survey changes every day (people can choose different date every week for a whole year), does it mean that we have to list all the dates and time slots we have in the code above?

Wondering if there’s any quicker way to do so, thanks for the prompt support again!!

No it will automatically pick up based on min and max dates

Hello @Deepak,

Thanks for the instruction!  Let me try the code above and let you know if successful or not :)

I have one more question(I hope it’s the last one): if the time zone we hope to display is UTC+8, where can we update it in code above? Since I saw some blog sharing that some time zone is not available to add in code directly or something like that, I’d love to confirm how to change to UTC+8 time zone. Thanks so much!! 

 

 

Adding this after const utcTime and then using it after formatting it according to Flatpickr.

            const utcPlus8Time = localTime.setZone("UTC+8");

            

Really appreciate your help @Deepak!

Sorry that I tried to directly use the example code you provided above, but I found there’s error in it and seems not to work(Please see the attached image below).

May I ask for your expertise to help look for the issue in this code? Since I’m not that familiar with Javascript especially troubleshooting….Huge appreciate for that😓🙏

Meanwhile, I’m trying to find other JS code that may help resolve this issue. Hope it works!

 

@bhaemily 

The header portion of code goes in header within look and feel> source only the script portion will stay in JS section.

Header:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.0/luxon.min.js"></script>

JS:

Qualtrics.SurveyEngine.addOnload(function() { const { DateTime } = luxon; jQuery("#" + this.questionId + " .InputText").flatpickr({ altInput: true, altFormat: "Y-m-d-D", dateFormat: "Y-m-d-D", minDate: new Date().fp_incr(2), maxDate: new Date().fp_incr(8), locale: { firstDayOfWeek: 1, // start week on Monday }, disable: function (date) { return (date.getDay() === 6 || date.getDay() === 0); } ], onChange: function(selectedDates) { if (selectedDates.length > 0) { const localTime = DateTime.fromJSDate(selectedDatess0]); console.log("Local Time: ", localTime.toString()); const utcTime = localTime.toUTC(); console.log("UTC Time: ", utcTime.toString()); } } }); });

Unfortunately, I wouldn’t be able to provide you modified code entriely.

Hope this helps!

Leave a Reply


Terms & Conditions