Date

Fast Path

Ownership

BaseDatePlugin is inline and void. The text child exists only to satisfy Plite's element shape.

Manual Setup

Value Shape

Date elements store one non-empty authored string. Parsing is derived from that value rather than persisted as a second field.

Date Normalization

normalizeDateValue returns the one persisted string.

getDateDisplayLabel(value) returns Today, Yesterday, Tomorrow, a localized long date, or the authored string.

Picker Behavior

The registry element is display-only while read-only. In editable mode, clicking the inline label opens a calendar popover.

The registry element uses contentEditable={false} on the inline wrapper, so users edit the date through the calendar instead of typing inside the void node.

Markdown

Canonical values serialize as a self-closing date tag with a value attribute.

Other authored values serialize as child text.

The deserializer also accepts child text such as <date>Mon Mar 23 2026</date> and normalizes it to value: '2026-03-23' when the date is safe to parse.

API Reference

'use client';
 
import {
  formatDateValue,
  getDateDisplayLabel,
  parseCanonicalDateValue,
} from '@platejs/date';
import { DatePlugin } from '@platejs/date/react';
import {
  type PlateElementProps,
  PlateElement,
  useEditorReadOnly,
} from 'platejs/react';
import * as React from 'react';
 
import { Calendar } from '@/components/ui/calendar';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { cn } from '@/lib/utils';
import { inlineSuggestionVariants } from '@/lib/inline-suggestion';
 
export function DateElement(props: PlateElementProps<typeof DatePlugin>) {
  const { editor, element } = props;
  const readOnly = useEditorReadOnly();
 
  const trigger = (
    <button
      className={cn(
        'w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground',
        inlineSuggestionVariants()
      )}
      contentEditable={false}
      draggable
      type="button"
    >
      {getDateDisplayLabel(element.value)}
    </button>
  );
 
  return (
    <PlateElement
      {...props}
      className="inline-block"
      attributes={{
        ...props.attributes,
        contentEditable: false,
      }}
    >
      {readOnly ? (
        trigger
      ) : (
        <Popover>
          <PopoverTrigger asChild>{trigger}</PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar
              selected={parseCanonicalDateValue(element.value)}
              onSelect={(date) => {
                if (!date) return;
 
                editor.update.nodes.set(
                  { value: formatDateValue(date) },
                  { at: element }
                );
              }}
              mode="single"
              initialFocus
            />
          </PopoverContent>
        </Popover>
      )}
      {props.children}
    </PlateElement>
  );
}
 
export const DateKit = [DatePlugin.configure({ component: DateElement })];Copy

import { BaseDatePlugin, getDateDisplayLabel } from '@platejs/date';
import { type PliteElementProps, PliteElement } from 'platejs/static';
import * as React from 'react';
 
import { cn } from '@/lib/utils';
import { inlineSuggestionVariants } from '@/lib/inline-suggestion';
 
export function DateElementStatic(
  props: PliteElementProps<typeof BaseDatePlugin>
) {
  const { element } = props;
 
  return (
    <PliteElement as="span" className="inline-block" {...props}>
      <span
        className={cn(
          'w-fit rounded-sm bg-muted px-1 text-muted-foreground',
          inlineSuggestionVariants()
        )}
      >
        {getDateDisplayLabel(element.value)}
      </span>
      {props.children}
    </PliteElement>
  );
}
 
export const BaseDateKit = [
  BaseDatePlugin.configure({ component: DateElementStatic }),
];Copy