Display Date and Time in User's Timezone

I've seen several forums ask for a quick and easy way to adapt a date in a CMS collection to a users timezone. This is usually for an event, to make it easy for someone to know what time something is going to be, no matter what timezone they are in.

I've done a video outlining this step by step, but I'm going to also outline the steps here.

Add this custom code as an embed on the page you want to add the custom date and time to:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
‍
 let timeFormat = new Date('{{wf {&quot;path&quot;:&quot;ADD_YOUR_CMS_ELEMENT_NAME&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD hh:mm a&quot;]\\}],&quot;type&quot;:&quot;Date&quot;\\} }} PDT'.replace(/-/g, "/"))

const date = {
  month: "long",
  day: "numeric",
   year: "numeric",
};

const time = {
   hour: '2-digit',
   minute: "numeric",
   hour12: true,
   timeZoneName: "short",
};

$('.date').html(Intl.DateTimeFormat('en-US', date).format(timeFormat))
$('.time').html(Intl.DateTimeFormat('en-US', time).format(timeFormat))
‍
})
</script>

‍

You'll notice a long ling of red text once you paste the code in. Not to fear, this is exactly what you should be seeing.

Webflow doesn't exactly love that we are using some weird custom code, so it's just trying to inform us that it thinks it looks wrong, but it's not.

We need to replace the "ADD_YOUR_CMS_ELEMENT_NAME" with the name of the Date/Time picker label that we've used. Since we need to get this exactly right, we are going to add in the custom CMS field at the bottom of all our code, and then copy it so we can find the title.

Once you've selected the purple CMS field, we are going to paste it into any text programme so we can see exactly what's inside it.

Though it looks like a bunch of nonsense, the bit that we're looking for is just after the 3rd &quot;, and remember that it will look like something similar to what you called the label back when we set up the Date/Time picker.

In my case, it's start-date-time, so I'm going to copy this and drop it back into our custom code that we added, replacing ADD_YOUR_CMS_ELEMENT_NAME.

If you managed to get through all this custom code and you're not feeling too nauseous, then let's bind the new date and time to the text and test this.

3. Binding the code to the text elements

Remember where we added in our text elements? We're going to add classes to this text to tell the code where we want the custom date and time to be displayed.

We're going to add a 'date' class to the date text, and 'time' class to the time text.

Once we've done this, we can publish our site and see the result.

Now our site is changing the date and time live on the page to be adapted to our local time zone.

The last issue to fix is that I set the date and time in New Zealand, but now the time is showing up differently than the time I set in the CMS. We want the time to adapt to my timezone, not a different timezone.

Let's jump back into our custom code and at the end of the red block, change the PDT timezone to ours, which is in this case, GMT+13.

After we have republished and refreshed our page, we can see time is now the time we set in the CMS.

Looks pretty good to me.

To test in other timezones, open up Chrome if you're not already using it, go into dev tools of the website you're testing, and open up the "Sensors" tab under More Tools. Here you can change the timezone and refresh the page to make sure all is looking good.