Write Date & Time Manual

General
1

I’ve learned that Glide uses Luxon in the Z timezone with ISO8601 format to store Date & Time columns. The Date Picker adds 2-3 extra steps, so I came up with an idea to manually input time using JS columns. It worked on my device, but I’m not sure if it works on other devices in different timezones.

My approach:

  1. Create a TimeID Math column: Set it as p1, which calculates minutes from the date:
hour(date)*60 + minute(date)
  1. Create a Timezone JS column: Set it as p2 to get the device’s timezone:
Intl.DateTimeFormat().resolvedOptions().timeZone;
  1. Create a TimeID to ISO8601 Z column: The JS function that converts p1 (TimeID) and p2 (Timezone) to ISO8601 format in UTC (Z timezone):
function convertToUTC(p1, p2) {
  let today = new Date();
  let year = today.getFullYear();
  let month = String(today.getMonth() + 1).padStart(2, "0");
  let day = String(today.getDate()).padStart(2, "0");
  
  // Convert p1 (time in minutes) to hours and minutes
  let hours = Math.floor(p1 / 60);
  let minutes = p1 % 60;

  // Create UTC Date object
  let localTime = new Date(`${year}-${month}-${day}T${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:00Z`);

  // Get timezone offset for p2
  let timeZoneOffset = new Date().toLocaleString('en-US', { timeZone: p2 });
  let localDate = new Date(timeZoneOffset);
  let offset = localDate.getTimezoneOffset();

  // Adjust the time for timezone offset
  localTime.setMinutes(localTime.getMinutes() - offset);

  // Return the ISO8601 formatted time in UTC
  return localTime.toISOString();
}

return convertToUTC(p1, p2);
  1. Use Text to Date to convert the TimeID to ISO8601 Z column to get your date.

Result:

  • This works for me, as it allows staff to quickly select the TimeID from an enum table.
  • You can also extend the TimeID to ISO8601 Z column with a p3 argument to apply this logic for other date columns.

It’s a quick and easy solution for staff, and it works in my case. I hope it works for other timezones too!

2

Trying to follow here. Can you show us how different it is to apply this instead of the native Date Picker? I’m not sure I understand the part you said about Date Picker adding 2-3 extra steps.

3

Hi e, Thinh! Happy New Year
The date picker is convenient, but its design requires clicking into the field, selecting a date, and then choosing a time. For tasks like editing attendance records, this means manual adjustments. However, with this approach, you simply enter a number into the field and hit OK—eliminating extra steps and saving time. It may not be the perfect solution, but it offers a faster, more efficient alternative for those looking to streamline their workflow.

1 Like
4

That sounds great for your use case! Have you considered using an AI component to streamline your workflow even more?

And Happy New Year bro!

5

Love to use the AI but I can’t figure how to get data and write data from multiple rows so I got stuck there. There is still a limitation of the resource that I might need to see and love the way you share how to get static CSS and HTML from them but I still don’t quite understand how to apply these back
to make it stable. I tried but failed. I hope they will share more documentation so I can try it again

1 Like