Date

PreviousNext
Date Element
Loading...

Features

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

Kit Usage

Installation

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

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,
  ],
});

Manual Usage

Installation

pnpm add @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,
}

Plugins

DatePlugin

Plugin for adding date elements to your document.

API

isPointNextToNode

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

Parameters

  • nodeType string

    The type of node to check for adjacency (e.g. 'date' for inline date elements).

  • options object

    Options for checking adjacency.

Optionsobject

Collapse all

  • at optional Point

    Position to check from. Uses current selection anchor if not provided.

  • reverse boolean

    Direction to check. If true, checks previous node; if false, checks next node.

Transforms

tf.insert.date

Parameters

Collapse all

  • date optional string

    The date string to insert in 'YYYY-MM-DD' format.

    • Default: Current date

  • options optional InsertNodesOptions

    Options for inserting nodes.

日期数学公式