Skip to content

Instantly share code, notes, and snippets.

@zeshhaan
Last active March 13, 2023 10:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zeshhaan/e075bd7371c223d0006def6b67071ddf to your computer and use it in GitHub Desktop.
Save zeshhaan/e075bd7371c223d0006def6b67071ddf to your computer and use it in GitHub Desktop.
Custom Date Time in Webflow
var Webflow = Webflow || [];
Webflow.push(function() {
let timeFormatPT = new Date('{{wf {"path":"added-date","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\}],"type":"Date"\} }} PDT'.replace(/-/g, "/"))
// Automate Day Light Savings
const DLS = timeFormatPT.getTimezoneOffset()/60 === 7 ? 'PST' : 'PDT';
timeFormatPT = new Date(`{{wf {"path":"added-date","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\}],"type":"Date"\} }} ${DLS}`.replace(/-/g, "/"))
const date = {
weekday: "long",
month: "short",
day: "numeric",
year: "numeric",
};
const time = {
hour: '2-digit',
minute: "numeric",
hour12: true,
timeZoneName: "short",
};
$('.pdate').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormatPT))
$('.ptime').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormatPT))
})
var Webflow = Webflow || [];
Webflow.push(function() {
const timeFormatWF = new Date('{{wf {"path":"added-date","transformers":[{"name":"date","arguments":["MMM DD, YYYY"]\}],"type":"Date"\} }}'.replace(/-/g, "/"));
let timeFormatPT = new Date('{{wf {"path":"added-date","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\}],"type":"Date"\} }} PDT'.replace(/-/g, "/"))
const date = {
weekday: "long",
month: "short",
day: "numeric",
year: "numeric",
};
const time = {
hour: '2-digit',
minute: "numeric",
hour12: true,
timeZoneName: "short",
};
$('.wfdate').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormatWF))
$('.pdate').html(Intl.DateTimeFormat(navigator.language, date).format(timeFormatPT))
$('.wftime').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormatWF))
$('.ptime').html(Intl.DateTimeFormat(navigator.language, time).format(timeFormatPT))
})
@zeshhaan
Copy link
Author

To change language, try replacing navigator.language with 'en-US'.
For other language formats, check this link for reference.

@lanredestiny
Copy link

I have tried this on a Webflow Collection Page, but it didn't work. Can you help out please?

@konami99
Copy link

I have a simpler solution; can you check if this works? https://webflowtimezoneconverter.carrd.co/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment