Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# LocalTime

A time of day with no date or timezone, stored as a string. Use it for a field that sets a
clock time on its own, such as when a business opens. The value is an ISO-8601 extended
local time, `hh:mm[:ss][.sss]`, for example `'09:00'`.

## Component

In your component code, import the `LocalTime` type from `@wix/editor-react-types`:

```ts
import type { LocalTime } from '@wix/editor-react-types';
```

At runtime it's a plain string:

```ts
type LocalTime = string
```

### Usage

Your code either consumes a value of type `LocalTime` or produces one:

::::tabs
:::Consumers
In a component that receives a `LocalTime`, format it for display or split it into
hours and minutes:

```tsx
import type { LocalTime } from '@wix/editor-react-types';

function OpeningHours({ openingTime }: { openingTime?: LocalTime }) {
  return <time dateTime={openingTime}>{openingTime}</time>;
}
```
:::
:::Producers
When your code produces a `LocalTime`, for a context or a function return, assign a literal
or derive one from a `Date` in local time:

```ts
import type { LocalTime } from '@wix/editor-react-types';

// A literal value.
const openingTime: LocalTime = '09:00';

// Or derived from a Date, in local time.
const currentTime: LocalTime = new Date().toLocaleTimeString('en-GB', {
  hour: '2-digit',
  minute: '2-digit',
});
```
:::
::::

## Manifest

In your manifest, declare the field with the `localTime` dataType:

```json
{ "dataType": "localTime" }
```

### Declaration

Declare a `localTime` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should set the time in a panel. It takes
`dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "openingTime": {
    "dataType": "localTime",
    "displayName": "Opening Time",
    "defaultValue": "09:00"
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the time to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "openingTime": {
    "dataType": "localTime",
    "displayName": "Opening Time"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a time. It takes `dataType`
and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "localTime",
      "displayName": "Opening Time"
    }
  ],
  "returns": {
    "dataType": "localTime"
  }
}
```
:::
::::