Write data in different timezones

When your component captures input for date or time fields, convert that value to the appropriate time zone before storing or displaying it.

Copy link to this section

Convert user input to a specific time zone

Use helper functions defined in UiSdlWithTimeZone to convert dates:

import { adjustDateToTimeZone } from '@c3/ui/UiSdlWithTimeZone';

const localDate = "2025-07-10T08:00:00.000Z";
const targetTimeZone = "Asia/Tokyo";

const adjustedDate = adjustDateToTimeZone(localDate, targetTimeZone);
console.log(adjustedDate); // e.g., "2025-07-10T17:00:00.000+09:00"

This function adjusts a date string for frameworks that do not support time zones (like ECharts), ensuring accurate display. You can also retrieve the offset using getOffsetFromLocalTimeZone() or select a fallback zone using getTimeZone().

Use formatTimeZone() to localize a time zone name for UI display:

const label = formatTimeZone("en-US", "Asia/Tokyo", "longGeneric");

This function returns a label like "Japan Standard Time" for display in dropdowns or summaries.