> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/site-settings/locale/sample-flows.md

## Article Content:

# Locale API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Show dates and times in the site time zone

To show dates and times in the site time zone, follow these steps:

1. Read the site's regional format and time zone:

   ```ts
   const { locale, timeZone } = localeService
   ```

2. Create a date formatter with both. Specify `locale` as the locale and `timeZone` as the `timeZone` option:

   ```ts
   const formatter = new Intl.DateTimeFormat(locale, {
       dateStyle: 'medium',
       timeStyle: 'short',
       timeZone,
   })
   ```

3. Format the date. For example, an event that starts at `2026-10-15T23:00:00Z` shows as `Oct 15, 2026, 7:00 PM` for every site visitor on a site whose regional format is `en-US` and whose time zone is `America/New_York`:

   ```ts
   const startsAt = formatter.format(new Date('2026-10-15T23:00:00Z'))
   ```

4. Render the formatted string:

   ```tsx
   return <time dateTime="2026-10-15T23:00:00Z">{startsAt}</time>
   ```

## Support languages written from right to left

To support languages written from right to left, follow these steps:

1. Read the site's text direction. If the component has its own direction setting, such as a `componentDirection` prop of your own, use that first, and fall back to the site's:

   ```ts
   const dir = componentDirection ?? localeService.direction
   ```

2. Set it as the `dir` attribute of the component's root element:

   ```tsx
   <div dir={dir} className="product-card">{children}</div>
   ```

3. Style the component with CSS logical properties, such as `margin-inline-start` instead of `margin-left`, so the layout mirrors when `dir` is `rtl`:

   ```css
   .product-card { padding-inline-start: 16px; text-align: start; }
   ```