Date - Plate — ContextQMD

Features

Insert and display inline date elements in your text.
Pick and edit dates through a bundled calendar UI.
Store dates as a single YYYY-MM-DD value on node.date.
Serialize to <date value="YYYY-MM-DD" /> in Markdown and MDX.

</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.

DateElement: Renders inline date elements.

Add Kit

Add the kit to your plugins:

tsx

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

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

</Steps>

Manual Usage

<Steps>

Installation

bash

npm install @platejs/date

Add Plugin

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

tsx

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.

tsx

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.

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

tsx

{
  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. Input is normalized to that shape before it reaches the node. - **Default:** Today's date as `YYYY-MM-DD` </APIItem> <APIItem name="options" type="InsertNodesOptions" optional> Options for inserting nodes. </APIItem> </APIParameters> </API> <Callout type="info"> **Note:** `DateElement` may render a friendlier label such as `Today` or a long-date string, but that is display-only. The stored node value is always the `YYYY-MM-DD` string. </Callout>