Converting date/time to the End-User's time zone
In this episode of Build it with Tim, we'll learn how you can dynamically display a Date/Time to match the User's selected time zone using Data Source Pipes and Tadabase Date Utilities.
Features Discussed:
-
Timezone (Time: 03:11)
Learn how the app's timezone is set to UTC in the general settings to serve as a reference point for all tickets. -
Table Rules (Time: 03:42)
Learn how a rule is created in the data builder to set the ticket creation date to the current date and time (in UTC) whenever a ticket record is created. -
Data Table (Time: 04:24)
Learn how a CSV file containing a list of time zones (approximately 400-500 entries) is imported into the app, automatically creating a new data table named "Time Zones." -
Tadabase Date Utilities (Time: 06:33)
Learn how the date utility pipe is configured to convert a UTC date to the logged-in user's local time zone. The source time zone is set to UTC, while the destination time zone is based on the user's selected time zone. -
Data Source Pipes (Time: 09:20)
Learn how the pipe is added to a table component, and the converted date is displayed based on the user's time zone. The formatting of the output can be customized to match desired date and time formats.
Transcript Summary
Introduction
Hey everybody, welcome back to Build It with Tadabase. On today's episode, we are talking about dates and converting time zones to the end user based on their selected time zone. It gets kind of tricky, but it's the basis of some really cool stuff that you can do. I was going to do a video on a whole meeting scheduler app that I had built, but it got crazy complicated, so maybe down the road I'll do that once I simplify it a little bit. But for now, let's get started with converting dates to the end user's time zone.
Objective
The goal of today is to build a system that we can use inside any application where we want to give the end user the ability to select their time zone and how they want dates to be formatted when viewing records that have a particular date. The app we're using right now has a time zone selected as UTC. This means that when we submit a record to this table, the raw value saved in the data table is in UTC. Using the settings configured by the user, we will then output and display the UTC time converted into the selected time zone and format.
Setting Up the Example Scenario
We're going to build a ticket support system. We’ll use the quick start wizard to get started by selecting customer support and support ticketing system. We'll create the data structure and pick a part of the app where we want to convert the time. The best approach is to place a date-time field on the ticket record itself and convert that date-time field to the end user’s time zone.
Creating and Configuring the Data
Every single record created in the tickets table will have the Ticket Creation Date field populated. If our support team spans the globe, we can take that value and display it to the end user in their local time zone. To start, we'll go into our app settings and change the time zone to UTC. This will be our reference point—every single ticket will be created in UTC. Based on who’s viewing it, we’ll convert it to their time zone.
Next, we'll create a table rule to set the Ticket Creation Date to the current date and time in UTC every time a ticket record is created. This value can be converted later.
Creating a Time Zones Table
To make this work, we need a table within our app that contains all the time zones we might want to select. I’ll pull this data from a CSV file containing hundreds of time zones. We'll import this CSV into our app as a new table called Time Zones.
Connecting Users to Time Zones
We need to connect the Users table to the Time Zones table, allowing each user to select their time zone. However, instead of just storing the record ID, we need to save the connected text value of the selected time zone. This will be crucial for our date conversion. We’ll set up a table rule on the Users table to save the time zone text every time a record is created or edited.
Using the Date Utilities Pipe
The date conversion will be handled using the Tadabase Date Utilities pipe, which has a function called Convert Time. We’ll install this pipe and set some default values like UTC as the source time zone. The format can be left as default for now, but it can be configured later if needed. The date-time value will be fed in from our ticket record.
Implementing the Conversion
We can run the pipe inside the data source for the table component displaying the tickets. Every time the page loads, the pipe will run, converting the UTC creation date to the logged-in user’s time zone and displaying the converted time. Note that this value isn't saved in the database; it's displayed dynamically based on the user’s time zone.
Testing the System
We’ll create a sample page for tickets with a form to add a new ticket. When the page loads, the UTC date will be converted and displayed in the user’s time zone. For instance, if the user is in New York (Eastern Standard Time), the date will be shown in their local time.
Formatting the Date Output
We can customize the date format using the pipe’s settings. For example, we can configure the format to display the date as "MM/DD/YYYY, hh
AM/PM." This can be adjusted based on user preferences.Adding Date Format Options
We can enhance the system by allowing users to choose their preferred date format. We’ll create a new table for date formats, connect it to the Users table, and save the selected format as a text string. The date conversion will then use this format when displaying the converted date-time.
Conclusion
That’s it for today’s episode. We’ve covered how to use the Tadabase Date Utilities pipe to convert a date-time field to an end user’s defined time zone and format. Hopefully, this adds another tool to your toolbox when building apps with Tadabase. Take what you’ve learned here and build it into your app to take everything to the next level. Thanks so much for watching, and take care!
We'd love to hear your feedback.