Date

PreviousNext
Date Element
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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.

'use client';
 
import { DatePlugin } from '@platejs/date/react';
 
import { DateElement } from '@/components/ui/date-node';
 
export const DateKit = [DatePlugin.withComponent(DateElement)];

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

Collapse all

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

    Options for checking adjacency.

Optionsobject

Collapse all

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

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

Transforms

tf.insert.date

Parameters

Collapse all

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

    • Default: Current date

    Options for inserting nodes.

ColumnEquation