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";

# LocalDateTime

A date and time with no timezone, stored as a string. Use it for a field that sets a moment
on the calendar, such as when an event starts. The value is an ISO-8601 extended local
date-time, `YYYY-MM-DDThh:mm[:ss][.sss]`, for example `'2024-03-15T09:00'`.

## Component

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

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

At runtime it's a plain string:

```ts
type LocalDateTime = string
```

### Usage

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

::::tabs
:::Consumers
In a component that receives a `LocalDateTime`, format it for display or parse it into a
`Date`:

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

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

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

// A literal value.
const eventStart: LocalDateTime = '2024-03-15T09:00';

// Or derived from a Date, in local time.
const now = new Date();
const date = now.toLocaleDateString('en-CA');
const time = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
const currentDateTime: LocalDateTime = `${date}T${time}`;
```
:::
::::

## Manifest

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

```json
{ "dataType": "localDateTime" }
```

### Declaration

Declare a `localDateTime` 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 date and time in a panel. It
takes `dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "eventStart": {
    "dataType": "localDateTime",
    "displayName": "Event Start",
    "defaultValue": "2024-03-15T09:00"
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the date and time to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "eventStart": {
    "dataType": "localDateTime",
    "displayName": "Event Start"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a date and time. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "localDateTime",
      "displayName": "Event Start"
    }
  ],
  "returns": {
    "dataType": "localDateTime"
  }
}
```
:::
::::