---
title: Date
docs:
  - route: /docs/components/date-element
    title: Date Element
---

<ComponentPreview name="date-demo" />

<PackageInfo>

## Features

- Insert and display dates within your text using inline date elements.
- These dates can be easily selected and modified using a calendar interface.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-date
```

## Usage

```tsx
import { DatePlugin } from '@udecode/plate-date/react';

const plugins = [
  // ...otherPlugins,
  DatePlugin,
];
```

## Plugins

### DatePlugin

Add Date Plugin to your document.

## API

### isPointNextToNode

Check if a point is next to a specific node type.

<APIParameters>

<APIItem name="editor" type="PlateEditor">
The editor instance.
</APIItem>

<APIItem name="nodeType" type="string">
The type of node to check for adjacency. This should be a string representing the node type, such as 'date' for inline date elements.
</APIItem>

<APIItem name="options" type="object">
The options for checking adjacency:

<APISubList>
<APISubListItem parent="options" name="at" type="Point" optional>
An optional Point object specifying the position to check from. If not provided, the current selection anchor will be used.
</APISubListItem>
<APISubListItem parent="options" name="reverse" type="boolean">
A boolean indicating the direction to check. If true, checks the previous node; if false, checks the next node.
</APISubListItem>
</APISubList>

</APIItem>

</APIParameters>

## Plugin Transforms

### editor.tf.insert.date

Insert a date into the editor.

<APIParameters>

<APIItem name="date" type="string" optional>
The date string to insert, in the format 'YYYY-MM-DD' (e.g., '2024-04-22'). If not provided, the current date will be used as the default.
</APIItem>

<APIItem name="options" type="InsertNodesOptions" optional>
The options for inserting nodes.
</APIItem>

</APIParameters>
