Use this example portal and dashboard to compare one date and time across multiple time zones. The converter is useful when you coordinate meetings, events, deadlines, or other time-sensitive activity across regions.
The example starts with a selected source time zone and date/time value, then displays the equivalent local time in other configured time zones.
Try a Slate example 💼
Copy this Suitcase ID and paste it in Database → Suitcase Import to import a pre-made user-scoped dashboard and anonymous portal:
54b8b60d-e5a5-4947-8a86-af0211a9c6e0:slate-ckwan-test⭐ Get Inspired
This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!
Use the converter
Select the Starting Time Zone. This is the source time zone for the date and time you want to convert.
Enter the starting date and time.
Optional: Select Use Current Time in Selected Zone to fill the input with the current time in the selected starting time zone.
The converter updates the other time zones after the starting time zone and date/time are set.
Review converted times
The example displays converted times in several sections so different audiences can scan the time zones they use most often.
North American time zones
The North American section uses visual cards. Each card includes the time zone name, a representative city or region label, the UTC offset for the selected date, an analog clock, and the converted local time.
International time zones
The international section uses a compact list format for quick comparison.
UTC
The UTC section keeps Coordinated Universal Time visible alongside the regional conversions.
Space time
The example also includes a Mars time section for demonstration purposes. It converts the selected Earth date and time to a simplified Mars Sol Date and Martian Coordinated Time value.
How the starting time zone works
The date and time entered in the converter are always interpreted as belonging to the selected starting time zone. For example, if you enter 9:00 AM with Eastern selected, then change the starting time zone to Pacific, the converter treats the input as 9:00 AM Pacific and recalculates the other outputs.
📝 Note
Daylight saving time is handled by the browser's built-in IANA time zone rules, such as
America/New_YorkandEurope/London. Offsets and abbreviations can change based on the date entered. If a region changes its time zone laws, results depend on the browser, operating system, and device time zone data being updated.
Customize the example
After importing the example, adjust the display text, default time zone, and included zones to match your audience.
Change the default starting time zone
The imported example sets Eastern as the default starting time zone. To change the default, move selected="selected" to the option that should appear first.
Rename labels without changing conversion logic
You can change the visible labels, such as renaming a time zone label or using campus location names, as long as the underlying value keeps the correct time zone identifier.
Update city or region labels
The city and region labels on the cards are display text. Replace them with campus names, office names, or other labels that help your users scan the converter.
Add, remove, or reorder zones
You can add, remove, or reorder cards and list rows to fit your users. If you remove or rename an element ID, update the matching reference in the JavaScript zones so each output points to the correct element.