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 { createValue } from './values/demo-values';

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

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

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.

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

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

    Options for checking adjacency.

Optionsobject

    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

    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

    Options for inserting nodes.

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.

ColumnEquation