║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Date docs:

• route: /docs/components/date-node 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>

Kit Usage

<Steps>

Installation

The fastest way to add date functionality is with the DateKit, which includes pre-configured DatePlugin with Plate UI components.

<ComponentSource name="date-kit" />

• DateElement: Renders inline date elements.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DateKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @platejs/date

Add Plugin

Include DatePlugin in your Plate plugins array when creating the editor.

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    DatePlugin,
  ],
});

Configure Plugin

Configure the plugin with a custom component to render date elements.

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
import { DateElement } from '@/components/ui/date-node';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    DatePlugin.withComponent(DateElement),
  ],
});

• withComponent: Assigns DateElement to render inline date elements.

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert date elements:

{
  focusEditor: true,
  icon: <CalendarIcon />,
  label: 'Date',
  value: KEYS.date,
}

</Steps>

Plugins

DatePlugin

Plugin for adding date elements to your document.

API

isPointNextToNode

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

<API name="isPointNextToNode"> <APIParameters> <APIItem name="nodeType" type="string"> The type of node to check for adjacency (e.g. 'date' for inline date elements). </APIItem> <APIItem name="options" type="object"> Options for checking adjacency. </APIItem> </APIParameters> <APIOptions type="object"> <APIItem name="at" type="Point" optional> Position to check from. Uses current selection anchor if not provided. </APIItem> <APIItem name="reverse" type="boolean"> Direction to check. If true, checks previous node; if false, checks next node. </APIItem> </APIOptions> </API>

Transforms

tf.insert.date

<API name="insert.date"> <APIParameters> <APIItem name="date" type="string" optional> The date string to insert in 'YYYY-MM-DD' format. - **Default:** Current date </APIItem> <APIItem name="options" type="InsertNodesOptions" optional> Options for inserting nodes. </APIItem> </APIParameters> </API>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║