SoFunction
Updated on 2025-04-13

Recommended commonly used solutions for processing time zones

Time zone processing

Several recommended solutions for dealing with time zones in

1. Use UTC as a unified standard

The best practice is to always use UTC time storage and processing on the server side, and convert to a local time zone only when displayed to the user.

import { format } from 'date-fns';
import { utcToZonedTime } from 'date-fns-tz';

interface TimeDisplayProps {
  utcTimestamp: string | Date;
}

export function TimeDisplay({ utcTimestamp }: TimeDisplayProps) {
  // Get the user time zone  const userTimeZone = ().resolvedOptions().timeZone;
  
  // Convert UTC time to user time zone time  const localTime = utcToZonedTime(new Date(utcTimestamp), userTimeZone);
  
  // Format display  return <time>{format(localTime, 'yyyy-MM-dd HH:mm:ss')}</time>;
}

2. Use client time zone detection

You can detect user time zones when the application starts:

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    //Storage the user time zone in global state or localStorage    const userTimeZone = ().resolvedOptions().timeZone;
    ('userTimeZone', userTimeZone);
  }, []);

  return <Component {...pageProps} />;
}

3. Use modern time processing libraries

Recommended usedayjsordate-fns-tzSuch a library handles time zone conversion:

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

(utc);
(timezone);

export function formatLocalTime(utcTime: string | Date, format = 'YYYY-MM-DD HH:mm:ss') {
  const userTimeZone = ().resolvedOptions().timeZone;
  return dayjs(utcTime).tz(userTimeZone).format(format);
}

Key Suggestions

Server-side storage:

  • Always use UTC time to store data
  • Make sure the timestamp is UTC when operating the database

API Response:

  • The time returned by the API always uses UTC
  • You can additionally return the server time zone information for debugging

Client display:

  • use()Get user time zone
  • Time zone conversion is performed only when displayed

Test precautions:

  • Test on servers in different time zones
  • Test using browsers in different time zones
  • Consider the impact of daylight saving time

Sample test code

describe('Time formatting', () => {
  it('should correctly convert UTC to different timezones', () => {
    const utcTime = '2024-03-20T10:00:00Z';
    
    // Simulate different time zones    const mockTimeZones = ['America/New_York', 'Asia/Shanghai', 'Europe/London'];
    
    (timezone => {
      // Test the conversion of each time zone      const localTime = formatLocalTime(utcTime);
      expect(localTime).toBeDefined();
    });
  });
});

This setting ensures that your app displays time correctly worldwide. Remember to do a good job of testing in different time zones before deployment, especially when dealing with situations across date boundaries.

This is the introduction to this article about the commonly used solutions for processing time zones. For more relevant processing time zone content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!