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

# Date and Time Types
Date and time data types provide automatic validation for temporal data. They enforce ISO-8601 format standards, ensuring data quality without requiring custom validation logic.

## Local date

Local date in ISO-8601 extended local date format `(YYYY-MM-DD)`.

### Example

An event date field:

In the manifest:

```typescript
editorElement: {
  data: {
    eventDate: {
      dataType: "localDate",
      displayName: "Event Date",
      defaultValue: "2024-03-15",
    },
  },
}
```

In the component:

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

interface EventProps {
  eventDate?: LocalDate;
}

const Event = ({ eventDate }: EventProps) => (
  <time dateTime={eventDate}>{eventDate}</time>
);
```

## Local time

Local time in ISO-8601 extended local time format `(hh:mm[:ss][.sss])`.

### Example

An opening time field:

In the manifest:

```typescript
editorElement: {
  data: {
    openingTime: {
      dataType: "localTime",
      displayName: "Opening Time",
      defaultValue: "09:00",
    },
  },
}
```

In the component:

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

interface HoursProps {
  openingTime?: LocalTime;
}

const Hours = ({ openingTime }: HoursProps) => <span>{openingTime}</span>;
```

## Local date and time

Local date and time in ISO-8601 extended local date-time format `(YYYY-MM-DDThh:mm[:ss][.sss])`.

### Example

An appointment scheduling field:

In the manifest:

```typescript
editorElement: {
  data: {
    appointmentTime: {
      dataType: "localDateTime",
      displayName: "Appointment",
      defaultValue: "2024-01-01T09:00:00",
    },
  },
}
```

In the component:

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

interface AppointmentProps {
  appointmentTime?: LocalDateTime;
}

const Appointment = ({ appointmentTime }: AppointmentProps) => (
  <time dateTime={appointmentTime}>{appointmentTime}</time>
);
```

## See also

- [Data Overview](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview)
- [Primitive Data Types](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/primitive-data-types)
- [Contact Information Types](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/contact-information-types)