Background: Facing the Chaos of the Date Type
“I want to change UTC to JST.” “I don’t know what country’s time the server log is showing.”
Every engineer has likely found themselves stuck in the “date and timezone” quagmire at least once. JavaScript’s Date object, in particular, has behaviors that are far from intuitive, making it a long-time nemesis for developers.
Conventionally, it’s been common to solve this by introducing external libraries like Moment.js, date-fns, or Day.js. However, while developing DevToolKits, I set a constraint for myself. I asked, “Do I really need to make users download tens of kilobytes of libraries just for a single timezone conversion?”
“I should be able to create a super-lightweight timezone converter using only modern browser standard features.” From this personal “challenge,” the development of our Timezone Converter began.
Technical Ingenuity: Pushing Standard APIs to the Limit
We focused on the Intl (Internationalization API) that comes standard in browsers.
1. “Accurate Disassembly” with Intl.DateTimeFormat
Outputting a specific timezone’s date and time in ISO 8601 format is surprisingly tedious with only standard APIs. Therefore, we adopted a method of deconstructing the date and time into parts using formatToParts and then rebuilding them.
const formatter = new Intl.DateTimeFormat('en-CA', {
timeZone,
hour12: false,
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
// Extract parts like year, month, and day individually
const parts = formatter.formatToParts(date).reduce((acc, cur) => ({
...acc, [cur.type]: cur.value
}), {} as any);By using this “take it apart once, then reassemble into the desired shape” approach, we achieved perfect formatting without using any heavy libraries.
2. Hacking Dynamic Offset Extraction
The most troublesome part of timezone conversion is offset info, like “Japan Standard Time is +09:00.” If you maintain this yourself as a dictionary, you can’t respond to changes like Daylight Saving Time.
So, we built logic to extract the latest offset info from the browser’s timeZoneName: 'shortOffset' option and سپس parse and combine it.
// Get the "current moment" offset info from the browser
const offsetName = new Intl.DateTimeFormat('en-US', {
timeZone,
timeZoneName: 'shortOffset',
}).formatToParts(date).find(p => p.type === 'timeZoneName')?.value;This gave us the unique advantage of an in-house implementation: “always being able to use the latest timezone data held by the OS and browser.”
The Ultimate Speed Brought by “Doing Nothing”
This tool is ready to use the moment you open the page.
There’s no waiting for heavy scripts to parse and no requests to an API.
By maximizing the capabilities the browser already has, we’ve completed the ultimate lightweight tool that engineers dream of: “library-free” and “zero dependencies.”
Conclusion
The Timezone Converter was a development that reaffirmed the “potential of browser standard features” for me.
“Doubt the library, trust the standard.” This developer’s pride is what leads to the light and airy operation of this tool.
Bring the world’s time closer and lighter. Please experience that speed for yourself.